<!DOCTYPE html><html lang="zh-CN" data-theme="dark"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Vue 源码解析 | 北城韩雨</title><meta name="keywords" content="Vue 源码"><meta name="author" content="北城韩雨"><meta name="copyright" content="北城韩雨"><meta name="format-detection" content="telephone=no"><meta name="theme-color" content="#0d0d0d"><meta name="description" content="Vue 源码解析">
<meta property="og:type" content="article">
<meta property="og:title" content="Vue 源码解析">
<meta property="og:url" content="http://example.com/2019/03/14/Vue%E6%BA%90%E7%A0%81/index.html">
<meta property="og:site_name" content="北城韩雨">
<meta property="og:description" content="Vue 源码解析">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.vjshi.com%2F2018-07-17%2F3eca5394963b50e37b7be2ba320029ec%2F00003.jpg%3Fx-oss-process%3Dstyle%2Fwatermark&refer=http%3A%2F%2Fpic.vjshi.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1629530644&t=10679b5732c52e39eeb588040240a790">
<meta property="article:published_time" content="2019-03-13T16:00:00.000Z">
<meta property="article:modified_time" content="2019-06-02T16:00:00.000Z">
<meta property="article:author" content="北城韩雨">
<meta property="article:tag" content="Vue">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.vjshi.com%2F2018-07-17%2F3eca5394963b50e37b7be2ba320029ec%2F00003.jpg%3Fx-oss-process%3Dstyle%2Fwatermark&refer=http%3A%2F%2Fpic.vjshi.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1629530644&t=10679b5732c52e39eeb588040240a790"><link rel="shortcut icon" href="/img/favicon.png"><link rel="canonical" href="http://example.com/2019/03/14/Vue%E6%BA%90%E7%A0%81/"><link rel="preconnect" href="//cdn.jsdelivr.net"/><link rel="preconnect" href="//busuanzi.ibruce.info"/><link rel="stylesheet" href="/css/index.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css" media="print" onload="this.media='all'"><script>const GLOBAL_CONFIG = { 
  root: '/',
  algolia: undefined,
  localSearch: undefined,
  translate: undefined,
  noticeOutdate: undefined,
  highlight: {"plugin":"highlighjs","highlightCopy":true,"highlightLang":true,"highlightHeightLimit":false},
  copy: {
    success: '复制成功',
    error: '复制错误',
    noSupport: '浏览器不支持'
  },
  relativeDate: {
    homepage: false,
    post: false
  },
  runtime: '',
  date_suffix: {
    just: '刚刚',
    min: '分钟前',
    hour: '小时前',
    day: '天前',
    month: '个月前'
  },
  copyright: undefined,
  lightbox: 'mediumZoom',
  Snackbar: undefined,
  source: {
    jQuery: 'https://cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js',
    justifiedGallery: {
      js: 'https://cdn.jsdelivr.net/npm/justifiedGallery/dist/js/jquery.justifiedGallery.min.js',
      css: 'https://cdn.jsdelivr.net/npm/justifiedGallery/dist/css/justifiedGallery.min.css'
    },
    fancybox: {
      js: 'https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@latest/dist/jquery.fancybox.min.js',
      css: 'https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@latest/dist/jquery.fancybox.min.css'
    }
  },
  isPhotoFigcaption: false,
  islazyload: false,
  isanchor: false
}</script><script id="config-diff">var GLOBAL_CONFIG_SITE = {
  title: 'Vue 源码解析',
  isPost: true,
  isHome: false,
  isHighlightShrink: false,
  isToc: true,
  postUpdate: '2019-06-03 00:00:00'
}</script><noscript><style type="text/css">
  #nav {
    opacity: 1
  }
  .justified-gallery img {
    opacity: 1
  }

  #recent-posts time,
  #post-meta time {
    display: inline !important
  }
</style></noscript><script>(win=>{
    win.saveToLocal = {
      set: function setWithExpiry(key, value, ttl) {
        if (ttl === 0) return
        const now = new Date()
        const expiryDay = ttl * 86400000
        const item = {
          value: value,
          expiry: now.getTime() + expiryDay,
        }
        localStorage.setItem(key, JSON.stringify(item))
      },

      get: function getWithExpiry(key) {
        const itemStr = localStorage.getItem(key)

        if (!itemStr) {
          return undefined
        }
        const item = JSON.parse(itemStr)
        const now = new Date()

        if (now.getTime() > item.expiry) {
          localStorage.removeItem(key)
          return undefined
        }
        return item.value
      }
    }
  
    win.getScript = url => new Promise((resolve, reject) => {
      const script = document.createElement('script')
      script.src = url
      script.async = true
      script.onerror = reject
      script.onload = script.onreadystatechange = function() {
        const loadState = this.readyState
        if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
        script.onload = script.onreadystatechange = null
        resolve()
      }
      document.head.appendChild(script)
    })
  
      win.activateDarkMode = function () {
        document.documentElement.setAttribute('data-theme', 'dark')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#0d0d0d')
        }
      }
      win.activateLightMode = function () {
        document.documentElement.setAttribute('data-theme', 'light')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#ffffff')
        }
      }
      const t = saveToLocal.get('theme')
    
          if (t === 'dark') activateDarkMode()
          else if (t === 'light') activateLightMode()
        
    const detectApple = () => {
      if (GLOBAL_CONFIG_SITE.isHome && /iPad|iPhone|iPod|Macintosh/.test(navigator.userAgent)){
        document.documentElement.classList.add('apple')
      }
    }
    detectApple()
    })(window)</script><link rel="stylesheet" href="/css/custom.css"  media="defer" onload="this.media='all'"><link rel="stylesheet" href="/css/coin.css"  media="defer" onload="this.media='all'"><link rel="stylesheet" href="/css/liuxing.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/l-lin/font-awesome-animation/dist/font-awesome-animation.min.css"  media="defer" onload="this.media='all'"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/zhheo/JS-Heo@main/bb/showbb_in_index.css"><!-- hexo injector head_end start --><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" media="print" onload="this.media='screen'"><link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/l-lin/font-awesome-animation/dist/font-awesome-animation.min.css" media="defer" onload="this.media='all'"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/hexo-butterfly-tag-plugins-plus/lib/tag_plugins.min.css" media="defer" onload="this.media='all'"><!-- hexo injector head_end end --><meta name="generator" content="Hexo 5.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src="/img/my.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="site-data"><div class="data-item is-center"><div class="data-item-link"><a href="/archives/"><div class="headline">文章</div><div class="length-num">65</div></a></div></div><div class="data-item is-center"><div class="data-item-link"><a href="/tags/"><div class="headline">标签</div><div class="length-num">23</div></a></div></div><div class="data-item is-center"><div class="data-item-link"><a href="/categories/"><div class="headline">分类</div><div class="length-num">21</div></a></div></div></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page faa-parent animated-hover" href="/"><i class="fa-fw fas fa-home faa-tada"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page faa-parent animated-hover" href="/shuoshuo/"><i class="fa-fw fas fa-archive faa-tada"></i><span> 叨逼叨</span></a></div><div class="menus_item"><a class="site-page faa-parent animated-hover" href="/tags/"><i class="fa-fw fas fa-tags faa-tada"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page faa-parent animated-hover" href="/categories/"><i class="fa-fw fas fa-folder-open faa-tada"></i><span> 分类</span></a></div><div class="menus_item"><a class="site-page faa-parent animated-hover" href="/link/"><i class="fa-fw fas fa-link faa-tada"></i><span> 友链</span></a></div><div class="menus_item"><a class="site-page faa-parent animated-hover" href="/comments/"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-message"></use></svg><span> 留言板</span></a></div><div class="menus_item"><a class="site-page faa-parent animated-hover" href="/about/"><i class="fa-fw fas fa-heart faa-tada"></i><span> 个人简介</span></a></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image: url('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.vjshi.com%2F2018-07-17%2F3eca5394963b50e37b7be2ba320029ec%2F00003.jpg%3Fx-oss-process%3Dstyle%2Fwatermark&amp;refer=http%3A%2F%2Fpic.vjshi.com&amp;app=2002&amp;size=f9999,10000&amp;q=a80&amp;n=0&amp;g=0n&amp;fmt=jpeg?sec=1629530644&amp;t=10679b5732c52e39eeb588040240a790')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">北城韩雨</a></span><div id="menus"><div class="menus_items"><div class="menus_item"><a class="site-page faa-parent animated-hover" href="/"><i class="fa-fw fas fa-home faa-tada"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page faa-parent animated-hover" href="/shuoshuo/"><i class="fa-fw fas fa-archive faa-tada"></i><span> 叨逼叨</span></a></div><div class="menus_item"><a class="site-page faa-parent animated-hover" href="/tags/"><i class="fa-fw fas fa-tags faa-tada"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page faa-parent animated-hover" href="/categories/"><i class="fa-fw fas fa-folder-open faa-tada"></i><span> 分类</span></a></div><div class="menus_item"><a class="site-page faa-parent animated-hover" href="/link/"><i class="fa-fw fas fa-link faa-tada"></i><span> 友链</span></a></div><div class="menus_item"><a class="site-page faa-parent animated-hover" href="/comments/"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-message"></use></svg><span> 留言板</span></a></div><div class="menus_item"><a class="site-page faa-parent animated-hover" href="/about/"><i class="fa-fw fas fa-heart faa-tada"></i><span> 个人简介</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="post-info"><h1 class="post-title">Vue 源码解析</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2019-03-13T16:00:00.000Z" title="发表于 2019-03-14 00:00:00">2019-03-14</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2019-06-02T16:00:00.000Z" title="更新于 2019-06-03 00:00:00">2019-06-03</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/%E6%BA%90%E7%A0%81/">源码</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-wordcount"><i class="far fa-file-word fa-fw post-meta-icon"></i><span class="post-meta-label">字数总计:</span><span class="word-count">10.4k</span><span class="post-meta-separator">|</span><i class="far fa-clock fa-fw post-meta-icon"></i><span class="post-meta-label">阅读时长:</span><span>57分钟</span></span><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" id="" data-flag-title="Vue 源码解析"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv"></span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><h1 id="Vue源码解析"><a href="#Vue源码解析" class="headerlink" title="Vue源码解析"></a>Vue源码解析</h1><h2 id="NPM包发布流程"><a href="#NPM包发布流程" class="headerlink" title="NPM包发布流程"></a>NPM包发布流程</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1.</span>我们自己写好的包文件 经过打包之后 发布到npm </span><br><span class="line"><span class="number">2.</span>然后别人都可以 通过 npm i 报名 去下载  然后安装引入</span><br><span class="line"><span class="number">3.</span>在发布包的时候 可以把我们的源码和打包好的源码发布上去</span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//需要在package.json文件中 去设置包名 </span></span><br><span class="line">&#123;</span><br><span class="line">  <span class="comment">//首先这个就是你的包名  </span></span><br><span class="line">  <span class="string">&quot;name&quot;</span>: <span class="string">&quot;zf-cascader&quot;</span>,</span><br><span class="line">  <span class="string">&quot;version&quot;</span>: <span class="string">&quot;1.0.1&quot;</span>,</span><br><span class="line">  <span class="comment">//是否放在私有仓库上 这里选择不是    </span></span><br><span class="line">  <span class="string">&quot;private&quot;</span>: <span class="literal">false</span>,</span><br><span class="line">  <span class="string">&quot;scripts&quot;</span>: &#123;</span><br><span class="line">    <span class="string">&quot;serve&quot;</span>: <span class="string">&quot;vue-cli-service serve&quot;</span>,</span><br><span class="line">    <span class="string">&quot;build&quot;</span>: <span class="string">&quot;vue-cli-service build&quot;</span>,</span><br><span class="line">    <span class="string">&quot;lint&quot;</span>: <span class="string">&quot;vue-cli-service lint&quot;</span>,</span><br><span class="line">    <span class="comment">//这个就是我们在打包的时候 需要打包出来一个类库lib 名字是什么 打包的文件在哪    </span></span><br><span class="line">    <span class="string">&quot;dist&quot;</span>: <span class="string">&quot;vue-cli-service build --target lib --name Cascader  ./src/components/Cascader.vue&quot;</span>,</span><br><span class="line">    <span class="string">&quot;test:unit&quot;</span>: <span class="string">&quot;vue-cli-service test:unit&quot;</span></span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="string">&quot;dependencies&quot;</span>: &#123;</span><br><span class="line">    <span class="string">&quot;core-js&quot;</span>: <span class="string">&quot;^2.6.5&quot;</span>,</span><br><span class="line">    <span class="string">&quot;lodash&quot;</span>: <span class="string">&quot;^4.17.15&quot;</span>,</span><br><span class="line">    <span class="string">&quot;vue&quot;</span>: <span class="string">&quot;^2.6.10&quot;</span></span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="string">&quot;devDependencies&quot;</span>: &#123;</span><br><span class="line">    <span class="string">&quot;@vue/cli-plugin-babel&quot;</span>: <span class="string">&quot;^3.10.0&quot;</span>,</span><br><span class="line">    <span class="string">&quot;@vue/cli-plugin-eslint&quot;</span>: <span class="string">&quot;^3.10.0&quot;</span>,</span><br><span class="line">    <span class="string">&quot;@vue/cli-plugin-unit-jest&quot;</span>: <span class="string">&quot;^3.10.0&quot;</span>,</span><br><span class="line">    <span class="string">&quot;@vue/cli-service&quot;</span>: <span class="string">&quot;^3.10.0&quot;</span>,</span><br><span class="line">    <span class="string">&quot;@vue/eslint-config-airbnb&quot;</span>: <span class="string">&quot;^4.0.0&quot;</span>,</span><br><span class="line">    <span class="string">&quot;@vue/test-utils&quot;</span>: <span class="string">&quot;1.0.0-beta.29&quot;</span>,</span><br><span class="line">    <span class="string">&quot;babel-core&quot;</span>: <span class="string">&quot;7.0.0-bridge.0&quot;</span>,</span><br><span class="line">    <span class="string">&quot;babel-eslint&quot;</span>: <span class="string">&quot;^10.0.1&quot;</span>,</span><br><span class="line">    <span class="string">&quot;babel-jest&quot;</span>: <span class="string">&quot;^23.6.0&quot;</span>,</span><br><span class="line">    <span class="string">&quot;eslint&quot;</span>: <span class="string">&quot;^5.16.0&quot;</span>,</span><br><span class="line">    <span class="string">&quot;eslint-plugin-vue&quot;</span>: <span class="string">&quot;^5.0.0&quot;</span>,</span><br><span class="line">    <span class="string">&quot;lint-staged&quot;</span>: <span class="string">&quot;^8.1.5&quot;</span>,</span><br><span class="line">    <span class="string">&quot;stylus&quot;</span>: <span class="string">&quot;^0.54.5&quot;</span>,</span><br><span class="line">    <span class="string">&quot;stylus-loader&quot;</span>: <span class="string">&quot;^3.0.2&quot;</span>,</span><br><span class="line">    <span class="string">&quot;vue-template-compiler&quot;</span>: <span class="string">&quot;^2.6.10&quot;</span></span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="string">&quot;gitHooks&quot;</span>: &#123;</span><br><span class="line">    <span class="string">&quot;pre-commit&quot;</span>: <span class="string">&quot;lint-staged&quot;</span></span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="string">&quot;lint-staged&quot;</span>: &#123;</span><br><span class="line">    <span class="string">&quot;*.&#123;js,vue&#125;&quot;</span>: [</span><br><span class="line">      <span class="string">&quot;vue-cli-service lint&quot;</span>,</span><br><span class="line">      <span class="string">&quot;git add&quot;</span></span><br><span class="line">    ]</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="comment">//这个就是npm包查找机制 我们知道包的查找机制都是从 node_modules 文件夹去查找 找到对应的package.json文件 然后找到main属性 去查找包    </span></span><br><span class="line">  <span class="string">&quot;main&quot;</span>:<span class="string">&quot;./dist/Cascader.umd.min.js&quot;</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//发包流程</span></span><br><span class="line"><span class="number">1.</span>首先要切换官方源 你要发布到npm 就切换到npm的官方源</span><br><span class="line"><span class="number">2.</span>然后要又npm 的账号 需要注册</span><br><span class="line"><span class="number">3.</span>npm addUser 添加账号 然后输出对应的账号和密码</span><br><span class="line"><span class="number">4.</span>然后使用npm publish</span><br></pre></td></tr></table></figure>
<h2 id="如何去看源码"><a href="#如何去看源码" class="headerlink" title="如何去看源码"></a>如何去看源码</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1.</span>刚刚我们已经知道了包的发布流程 和引用 </span><br><span class="line"><span class="number">2.</span>接下来我们来看一下 怎么去看Vue的源码</span><br><span class="line"><span class="number">3.</span>源码地址 github.com/vuejs/vue</span><br><span class="line"><span class="number">4.</span>这里的源码 是打包和压缩都在一起的</span><br><span class="line"><span class="number">5.</span>我们还是从package.json去看</span><br></pre></td></tr></table></figure>
<figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//下面是我们下来的源码文件的package.json</span></span><br><span class="line"><span class="comment">//我们在看的时候 都知道 包是从main属性去查找的 但是这里 他打包之后的main引入的commonjs的模块快规范 但是我们这里用的ES6的import  所以我们需要找到module属性</span></span><br><span class="line">&#123;</span><br><span class="line">  <span class="attr">&quot;name&quot;</span>: <span class="string">&quot;vue&quot;</span>,</span><br><span class="line">  <span class="attr">&quot;version&quot;</span>: <span class="string">&quot;2.6.11&quot;</span>,</span><br><span class="line">  <span class="attr">&quot;description&quot;</span>: <span class="string">&quot;Reactive, component-oriented view layer for modern web interfaces.&quot;</span>,</span><br><span class="line">  <span class="attr">&quot;main&quot;</span>: <span class="string">&quot;dist/vue.runtime.common.js&quot;</span>,</span><br><span class="line">  <span class="comment">//这里可以看到打包之后的文件叫做   vue.runtime.esm.js 文件 是ES6的 不过这是打包之后的文件 我们需要看的是打包之前的文件 所以我们要找打包命令  常用的打包命令就是npm run build 这里我们去看下这个命令</span></span><br><span class="line">  <span class="attr">&quot;module&quot;</span>: <span class="string">&quot;dist/vue.runtime.esm.js&quot;</span>,</span><br><span class="line">  <span class="attr">&quot;unpkg&quot;</span>: <span class="string">&quot;dist/vue.js&quot;</span>,</span><br><span class="line">  <span class="attr">&quot;jsdelivr&quot;</span>: <span class="string">&quot;dist/vue.js&quot;</span>,</span><br><span class="line">  <span class="attr">&quot;typings&quot;</span>: <span class="string">&quot;types/index.d.ts&quot;</span>,</span><br><span class="line">  <span class="attr">&quot;files&quot;</span>: [</span><br><span class="line">    <span class="string">&quot;src&quot;</span>,</span><br><span class="line">    <span class="string">&quot;dist/*.js&quot;</span>,</span><br><span class="line">    <span class="string">&quot;types/*.d.ts&quot;</span></span><br><span class="line">  ],</span><br><span class="line">  <span class="attr">&quot;sideEffects&quot;</span>: <span class="literal">false</span>,</span><br><span class="line">  <span class="attr">&quot;scripts&quot;</span>: &#123;</span><br><span class="line">    <span class="attr">&quot;dev&quot;</span>: <span class="string">&quot;rollup -w -c scripts/config.js --environment TARGET:web-full-dev&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;dev:cjs&quot;</span>: <span class="string">&quot;rollup -w -c scripts/config.js --environment TARGET:web-runtime-cjs-dev&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;dev:esm&quot;</span>: <span class="string">&quot;rollup -w -c scripts/config.js --environment TARGET:web-runtime-esm&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;dev:test&quot;</span>: <span class="string">&quot;karma start test/unit/karma.dev.config.js&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;dev:ssr&quot;</span>: <span class="string">&quot;rollup -w -c scripts/config.js --environment TARGET:web-server-renderer&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;dev:compiler&quot;</span>: <span class="string">&quot;rollup -w -c scripts/config.js --environment TARGET:web-compiler &quot;</span>,</span><br><span class="line">    <span class="attr">&quot;dev:weex&quot;</span>: <span class="string">&quot;rollup -w -c scripts/config.js --environment TARGET:weex-framework&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;dev:weex:factory&quot;</span>: <span class="string">&quot;rollup -w -c scripts/config.js --environment TARGET:weex-factory&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;dev:weex:compiler&quot;</span>: <span class="string">&quot;rollup -w -c scripts/config.js --environment TARGET:weex-compiler &quot;</span>,</span><br><span class="line">    <span class="comment">//可以看到 他执行了一个node 命令 文件就是scripts下的build.js文件 我们找到这个文件去看一下  </span></span><br><span class="line">    <span class="attr">&quot;build&quot;</span>: <span class="string">&quot;node scripts/build.js&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;build:ssr&quot;</span>: <span class="string">&quot;npm run build -- web-runtime-cjs,web-server-renderer&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;build:weex&quot;</span>: <span class="string">&quot;npm run build -- weex&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;test&quot;</span>: <span class="string">&quot;npm run lint &amp;&amp; flow check &amp;&amp; npm run test:types &amp;&amp; npm run test:cover &amp;&amp; npm run test:e2e -- --env phantomjs &amp;&amp; npm run test:ssr &amp;&amp; npm run test:weex&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;test:unit&quot;</span>: <span class="string">&quot;karma start test/unit/karma.unit.config.js&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;test:cover&quot;</span>: <span class="string">&quot;karma start test/unit/karma.cover.config.js&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;test:e2e&quot;</span>: <span class="string">&quot;npm run build -- web-full-prod,web-server-basic-renderer &amp;&amp; node test/e2e/runner.js&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;test:weex&quot;</span>: <span class="string">&quot;npm run build:weex &amp;&amp; jasmine JASMINE_CONFIG_PATH=test/weex/jasmine.js&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;test:ssr&quot;</span>: <span class="string">&quot;npm run build:ssr &amp;&amp; jasmine JASMINE_CONFIG_PATH=test/ssr/jasmine.js&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;test:sauce&quot;</span>: <span class="string">&quot;npm run sauce -- 0 &amp;&amp; npm run sauce -- 1 &amp;&amp; npm run sauce -- 2&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;test:types&quot;</span>: <span class="string">&quot;tsc -p ./types/test/tsconfig.json&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;lint&quot;</span>: <span class="string">&quot;eslint src scripts test&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;flow&quot;</span>: <span class="string">&quot;flow check&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;sauce&quot;</span>: <span class="string">&quot;karma start test/unit/karma.sauce.config.js&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;bench:ssr&quot;</span>: <span class="string">&quot;npm run build:ssr &amp;&amp; node benchmarks/ssr/renderToString.js &amp;&amp; node benchmarks/ssr/renderToStream.js&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;release&quot;</span>: <span class="string">&quot;bash scripts/release.sh&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;release:weex&quot;</span>: <span class="string">&quot;bash scripts/release-weex.sh&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;release:note&quot;</span>: <span class="string">&quot;node scripts/gen-release-note.js&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;commit&quot;</span>: <span class="string">&quot;git-cz&quot;</span></span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">&quot;gitHooks&quot;</span>: &#123;</span><br><span class="line">    <span class="attr">&quot;pre-commit&quot;</span>: <span class="string">&quot;lint-staged&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;commit-msg&quot;</span>: <span class="string">&quot;node scripts/verify-commit-msg.js&quot;</span></span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">&quot;lint-staged&quot;</span>: &#123;</span><br><span class="line">    <span class="attr">&quot;*.js&quot;</span>: [</span><br><span class="line">      <span class="string">&quot;eslint --fix&quot;</span>,</span><br><span class="line">      <span class="string">&quot;git add&quot;</span></span><br><span class="line">    ]</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">&quot;repository&quot;</span>: &#123;</span><br><span class="line">    <span class="attr">&quot;type&quot;</span>: <span class="string">&quot;git&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;url&quot;</span>: <span class="string">&quot;git+https://github.com/vuejs/vue.git&quot;</span></span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">&quot;keywords&quot;</span>: [</span><br><span class="line">    <span class="string">&quot;vue&quot;</span></span><br><span class="line">  ],</span><br><span class="line">  <span class="attr">&quot;author&quot;</span>: <span class="string">&quot;Evan You&quot;</span>,</span><br><span class="line">  <span class="attr">&quot;license&quot;</span>: <span class="string">&quot;MIT&quot;</span>,</span><br><span class="line">  <span class="attr">&quot;bugs&quot;</span>: &#123;</span><br><span class="line">    <span class="attr">&quot;url&quot;</span>: <span class="string">&quot;https://github.com/vuejs/vue/issues&quot;</span></span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">&quot;homepage&quot;</span>: <span class="string">&quot;https://github.com/vuejs/vue#readme&quot;</span>,</span><br><span class="line">  <span class="attr">&quot;devDependencies&quot;</span>: &#123;</span><br><span class="line">    <span class="attr">&quot;@babel/core&quot;</span>: <span class="string">&quot;^7.0.0&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;@babel/plugin-proposal-class-properties&quot;</span>: <span class="string">&quot;^7.1.0&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;@babel/plugin-syntax-dynamic-import&quot;</span>: <span class="string">&quot;^7.0.0&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;@babel/plugin-syntax-jsx&quot;</span>: <span class="string">&quot;^7.0.0&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;@babel/plugin-transform-flow-strip-types&quot;</span>: <span class="string">&quot;^7.0.0&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;@babel/preset-env&quot;</span>: <span class="string">&quot;^7.0.0&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;@babel/register&quot;</span>: <span class="string">&quot;^7.0.0&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;@types/node&quot;</span>: <span class="string">&quot;^12.12.0&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;@types/webpack&quot;</span>: <span class="string">&quot;^4.4.22&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;acorn&quot;</span>: <span class="string">&quot;^5.2.1&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;babel-eslint&quot;</span>: <span class="string">&quot;^10.0.1&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;babel-helper-vue-jsx-merge-props&quot;</span>: <span class="string">&quot;^2.0.3&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;babel-loader&quot;</span>: <span class="string">&quot;^8.0.4&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;babel-plugin-istanbul&quot;</span>: <span class="string">&quot;^5.1.0&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;babel-plugin-transform-vue-jsx&quot;</span>: <span class="string">&quot;^4.0.1&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;babel-preset-flow-vue&quot;</span>: <span class="string">&quot;^1.0.0&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;buble&quot;</span>: <span class="string">&quot;^0.19.3&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;chalk&quot;</span>: <span class="string">&quot;^2.3.0&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;chromedriver&quot;</span>: <span class="string">&quot;^2.45.0&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;codecov&quot;</span>: <span class="string">&quot;^3.0.0&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;commitizen&quot;</span>: <span class="string">&quot;^2.9.6&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;conventional-changelog&quot;</span>: <span class="string">&quot;^1.1.3&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;cross-spawn&quot;</span>: <span class="string">&quot;^6.0.5&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;cz-conventional-changelog&quot;</span>: <span class="string">&quot;^2.0.0&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;de-indent&quot;</span>: <span class="string">&quot;^1.0.2&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;es6-promise&quot;</span>: <span class="string">&quot;^4.1.0&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;escodegen&quot;</span>: <span class="string">&quot;^1.8.1&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;eslint&quot;</span>: <span class="string">&quot;^5.7.0&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;eslint-plugin-flowtype&quot;</span>: <span class="string">&quot;^2.34.0&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;eslint-plugin-jasmine&quot;</span>: <span class="string">&quot;^2.8.4&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;file-loader&quot;</span>: <span class="string">&quot;^3.0.1&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;flow-bin&quot;</span>: <span class="string">&quot;^0.61.0&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;hash-sum&quot;</span>: <span class="string">&quot;^1.0.2&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;he&quot;</span>: <span class="string">&quot;^1.1.1&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;http-server&quot;</span>: <span class="string">&quot;^0.11.1&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;jasmine&quot;</span>: <span class="string">&quot;^2.99.0&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;jasmine-core&quot;</span>: <span class="string">&quot;^2.99.0&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;karma&quot;</span>: <span class="string">&quot;^3.1.1&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;karma-chrome-launcher&quot;</span>: <span class="string">&quot;^2.1.1&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;karma-coverage&quot;</span>: <span class="string">&quot;^1.1.1&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;karma-firefox-launcher&quot;</span>: <span class="string">&quot;^1.0.1&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;karma-jasmine&quot;</span>: <span class="string">&quot;^1.1.0&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;karma-mocha-reporter&quot;</span>: <span class="string">&quot;^2.2.3&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;karma-phantomjs-launcher&quot;</span>: <span class="string">&quot;^1.0.4&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;karma-safari-launcher&quot;</span>: <span class="string">&quot;^1.0.0&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;karma-sauce-launcher&quot;</span>: <span class="string">&quot;^2.0.2&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;karma-sourcemap-loader&quot;</span>: <span class="string">&quot;^0.3.7&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;karma-webpack&quot;</span>: <span class="string">&quot;^4.0.0-rc.2&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;lint-staged&quot;</span>: <span class="string">&quot;^8.0.0&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;lodash&quot;</span>: <span class="string">&quot;^4.17.4&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;lodash.template&quot;</span>: <span class="string">&quot;^4.4.0&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;lodash.uniq&quot;</span>: <span class="string">&quot;^4.5.0&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;lru-cache&quot;</span>: <span class="string">&quot;^5.1.1&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;nightwatch&quot;</span>: <span class="string">&quot;^0.9.16&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;nightwatch-helpers&quot;</span>: <span class="string">&quot;^1.2.0&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;phantomjs-prebuilt&quot;</span>: <span class="string">&quot;^2.1.14&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;puppeteer&quot;</span>: <span class="string">&quot;^1.11.0&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;resolve&quot;</span>: <span class="string">&quot;^1.3.3&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;rollup&quot;</span>: <span class="string">&quot;^1.0.0&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;rollup-plugin-alias&quot;</span>: <span class="string">&quot;^1.3.1&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;rollup-plugin-buble&quot;</span>: <span class="string">&quot;^0.19.6&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;rollup-plugin-commonjs&quot;</span>: <span class="string">&quot;^9.2.0&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;rollup-plugin-flow-no-whitespace&quot;</span>: <span class="string">&quot;^1.0.0&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;rollup-plugin-node-resolve&quot;</span>: <span class="string">&quot;^4.0.0&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;rollup-plugin-replace&quot;</span>: <span class="string">&quot;^2.0.0&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;selenium-server&quot;</span>: <span class="string">&quot;^2.53.1&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;serialize-javascript&quot;</span>: <span class="string">&quot;^2.1.2&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;shelljs&quot;</span>: <span class="string">&quot;^0.8.1&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;terser&quot;</span>: <span class="string">&quot;^3.10.2&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;typescript&quot;</span>: <span class="string">&quot;^3.6.4&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;webpack&quot;</span>: <span class="string">&quot;~4.28.4&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;weex-js-runtime&quot;</span>: <span class="string">&quot;^0.23.6&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;weex-styler&quot;</span>: <span class="string">&quot;^0.3.0&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;yorkie&quot;</span>: <span class="string">&quot;^2.0.0&quot;</span></span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">&quot;config&quot;</span>: &#123;</span><br><span class="line">    <span class="attr">&quot;commitizen&quot;</span>: &#123;</span><br><span class="line">      <span class="attr">&quot;path&quot;</span>: <span class="string">&quot;./node_modules/cz-conventional-changelog&quot;</span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//vue源码下的scripts文件夹下的 build.js文件</span></span><br><span class="line"><span class="keyword">const</span> fs = <span class="built_in">require</span>(<span class="string">&#x27;fs&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">&#x27;path&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> zlib = <span class="built_in">require</span>(<span class="string">&#x27;zlib&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> rollup = <span class="built_in">require</span>(<span class="string">&#x27;rollup&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> terser = <span class="built_in">require</span>(<span class="string">&#x27;terser&#x27;</span>)</span><br><span class="line"></span><br><span class="line"><span class="keyword">if</span> (!fs.existsSync(<span class="string">&#x27;dist&#x27;</span>)) &#123;</span><br><span class="line">  fs.mkdirSync(<span class="string">&#x27;dist&#x27;</span>)</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//这里我们看出 他又引入了config.js文件</span></span><br><span class="line"><span class="keyword">let</span> builds = <span class="built_in">require</span>(<span class="string">&#x27;./config&#x27;</span>).getAllBuilds()</span><br><span class="line"></span><br><span class="line"><span class="comment">// filter builds via command line arg</span></span><br><span class="line"><span class="keyword">if</span> (process.argv[<span class="number">2</span>]) &#123;</span><br><span class="line">  <span class="keyword">const</span> filters = process.argv[<span class="number">2</span>].split(<span class="string">&#x27;,&#x27;</span>)</span><br><span class="line">  builds = builds.filter(<span class="function"><span class="params">b</span> =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> filters.some(<span class="function"><span class="params">f</span> =&gt;</span> b.output.file.indexOf(f) &gt; -<span class="number">1</span> || b._name.indexOf(f) &gt; -<span class="number">1</span>)</span><br><span class="line">  &#125;)</span><br><span class="line">&#125; <span class="keyword">else</span> &#123;</span><br><span class="line">  <span class="comment">// filter out weex builds by default</span></span><br><span class="line">  builds = builds.filter(<span class="function"><span class="params">b</span> =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> b.output.file.indexOf(<span class="string">&#x27;weex&#x27;</span>) === -<span class="number">1</span></span><br><span class="line">  &#125;)</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">build(builds)</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">build</span> (<span class="params">builds</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">let</span> built = <span class="number">0</span></span><br><span class="line">  <span class="keyword">const</span> total = builds.length</span><br><span class="line">  <span class="keyword">const</span> next = <span class="function">() =&gt;</span> &#123;</span><br><span class="line">    buildEntry(builds[built]).then(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">      built++</span><br><span class="line">      <span class="keyword">if</span> (built &lt; total) &#123;</span><br><span class="line">        next()</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;).catch(logError)</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  next()</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">buildEntry</span> (<span class="params">config</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">const</span> output = config.output</span><br><span class="line">  <span class="keyword">const</span> &#123; file, banner &#125; = output</span><br><span class="line">  <span class="keyword">const</span> isProd = <span class="regexp">/(min|prod)\.js$/</span>.test(file)</span><br><span class="line">  <span class="keyword">return</span> rollup.rollup(config)</span><br><span class="line">    .then(<span class="function"><span class="params">bundle</span> =&gt;</span> bundle.generate(output))</span><br><span class="line">    .then(<span class="function">(<span class="params">&#123; output: [&#123; code &#125;] &#125;</span>) =&gt;</span> &#123;</span><br><span class="line">      <span class="keyword">if</span> (isProd) &#123;</span><br><span class="line">        <span class="keyword">const</span> minified = (banner ? banner + <span class="string">&#x27;\n&#x27;</span> : <span class="string">&#x27;&#x27;</span>) + terser.minify(code, &#123;</span><br><span class="line">          toplevel: <span class="literal">true</span>,</span><br><span class="line">          output: &#123;</span><br><span class="line">            ascii_only: <span class="literal">true</span></span><br><span class="line">          &#125;,</span><br><span class="line">          compress: &#123;</span><br><span class="line">            pure_funcs: [<span class="string">&#x27;makeMap&#x27;</span>]</span><br><span class="line">          &#125;</span><br><span class="line">        &#125;).code</span><br><span class="line">        <span class="keyword">return</span> write(file, minified, <span class="literal">true</span>)</span><br><span class="line">      &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">        <span class="keyword">return</span> write(file, code)</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;)</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">write</span> (<span class="params">dest, code, zip</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function">(<span class="params">resolve, reject</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="function"><span class="keyword">function</span> <span class="title">report</span> (<span class="params">extra</span>) </span>&#123;</span><br><span class="line">      <span class="built_in">console</span>.log(blue(path.relative(process.cwd(), dest)) + <span class="string">&#x27; &#x27;</span> + getSize(code) + (extra || <span class="string">&#x27;&#x27;</span>))</span><br><span class="line">      resolve()</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    fs.writeFile(dest, code, <span class="function"><span class="params">err</span> =&gt;</span> &#123;</span><br><span class="line">      <span class="keyword">if</span> (err) <span class="keyword">return</span> reject(err)</span><br><span class="line">      <span class="keyword">if</span> (zip) &#123;</span><br><span class="line">        zlib.gzip(code, <span class="function">(<span class="params">err, zipped</span>) =&gt;</span> &#123;</span><br><span class="line">          <span class="keyword">if</span> (err) <span class="keyword">return</span> reject(err)</span><br><span class="line">          report(<span class="string">&#x27; (gzipped: &#x27;</span> + getSize(zipped) + <span class="string">&#x27;)&#x27;</span>)</span><br><span class="line">        &#125;)</span><br><span class="line">      &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">        report()</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;)</span><br><span class="line">  &#125;)</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">getSize</span> (<span class="params">code</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> (code.length / <span class="number">1024</span>).toFixed(<span class="number">2</span>) + <span class="string">&#x27;kb&#x27;</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">logError</span> (<span class="params">e</span>) </span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(e)</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">blue</span> (<span class="params">str</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="string">&#x27;\x1b[1m\x1b[34m&#x27;</span> + str + <span class="string">&#x27;\x1b[39m\x1b[22m&#x27;</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br><span class="line">155</span><br><span class="line">156</span><br><span class="line">157</span><br><span class="line">158</span><br><span class="line">159</span><br><span class="line">160</span><br><span class="line">161</span><br><span class="line">162</span><br><span class="line">163</span><br><span class="line">164</span><br><span class="line">165</span><br><span class="line">166</span><br><span class="line">167</span><br><span class="line">168</span><br><span class="line">169</span><br><span class="line">170</span><br><span class="line">171</span><br><span class="line">172</span><br><span class="line">173</span><br><span class="line">174</span><br><span class="line">175</span><br><span class="line">176</span><br><span class="line">177</span><br><span class="line">178</span><br><span class="line">179</span><br><span class="line">180</span><br><span class="line">181</span><br><span class="line">182</span><br><span class="line">183</span><br><span class="line">184</span><br><span class="line">185</span><br><span class="line">186</span><br><span class="line">187</span><br><span class="line">188</span><br><span class="line">189</span><br><span class="line">190</span><br><span class="line">191</span><br><span class="line">192</span><br><span class="line">193</span><br><span class="line">194</span><br><span class="line">195</span><br><span class="line">196</span><br><span class="line">197</span><br><span class="line">198</span><br><span class="line">199</span><br><span class="line">200</span><br><span class="line">201</span><br><span class="line">202</span><br><span class="line">203</span><br><span class="line">204</span><br><span class="line">205</span><br><span class="line">206</span><br><span class="line">207</span><br><span class="line">208</span><br><span class="line">209</span><br><span class="line">210</span><br><span class="line">211</span><br><span class="line">212</span><br><span class="line">213</span><br><span class="line">214</span><br><span class="line">215</span><br><span class="line">216</span><br><span class="line">217</span><br><span class="line">218</span><br><span class="line">219</span><br><span class="line">220</span><br><span class="line">221</span><br><span class="line">222</span><br><span class="line">223</span><br><span class="line">224</span><br><span class="line">225</span><br><span class="line">226</span><br><span class="line">227</span><br><span class="line">228</span><br><span class="line">229</span><br><span class="line">230</span><br><span class="line">231</span><br><span class="line">232</span><br><span class="line">233</span><br><span class="line">234</span><br><span class="line">235</span><br><span class="line">236</span><br><span class="line">237</span><br><span class="line">238</span><br><span class="line">239</span><br><span class="line">240</span><br><span class="line">241</span><br><span class="line">242</span><br><span class="line">243</span><br><span class="line">244</span><br><span class="line">245</span><br><span class="line">246</span><br><span class="line">247</span><br><span class="line">248</span><br><span class="line">249</span><br><span class="line">250</span><br><span class="line">251</span><br><span class="line">252</span><br><span class="line">253</span><br><span class="line">254</span><br><span class="line">255</span><br><span class="line">256</span><br><span class="line">257</span><br><span class="line">258</span><br><span class="line">259</span><br><span class="line">260</span><br><span class="line">261</span><br><span class="line">262</span><br><span class="line">263</span><br><span class="line">264</span><br><span class="line">265</span><br><span class="line">266</span><br><span class="line">267</span><br><span class="line">268</span><br><span class="line">269</span><br><span class="line">270</span><br><span class="line">271</span><br><span class="line">272</span><br><span class="line">273</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//vue源码 scripts文件夹下  config.js文件</span></span><br><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">&#x27;path&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> buble = <span class="built_in">require</span>(<span class="string">&#x27;rollup-plugin-buble&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> alias = <span class="built_in">require</span>(<span class="string">&#x27;rollup-plugin-alias&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> cjs = <span class="built_in">require</span>(<span class="string">&#x27;rollup-plugin-commonjs&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> replace = <span class="built_in">require</span>(<span class="string">&#x27;rollup-plugin-replace&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> node = <span class="built_in">require</span>(<span class="string">&#x27;rollup-plugin-node-resolve&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> flow = <span class="built_in">require</span>(<span class="string">&#x27;rollup-plugin-flow-no-whitespace&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> version = process.env.VERSION || <span class="built_in">require</span>(<span class="string">&#x27;../package.json&#x27;</span>).version</span><br><span class="line"><span class="keyword">const</span> weexVersion = process.env.WEEX_VERSION || <span class="built_in">require</span>(<span class="string">&#x27;../packages/weex-vue-framework/package.json&#x27;</span>).version</span><br><span class="line"><span class="keyword">const</span> featureFlags = <span class="built_in">require</span>(<span class="string">&#x27;./feature-flags&#x27;</span>)</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> banner =</span><br><span class="line">  <span class="string">&#x27;/*!\n&#x27;</span> +</span><br><span class="line">  <span class="string">` * Vue.js v<span class="subst">$&#123;version&#125;</span>\n`</span> +</span><br><span class="line">  <span class="string">` * (c) 2014-<span class="subst">$&#123;<span class="keyword">new</span> <span class="built_in">Date</span>().getFullYear()&#125;</span> Evan You\n`</span> +</span><br><span class="line">  <span class="string">&#x27; * Released under the MIT License.\n&#x27;</span> +</span><br><span class="line">  <span class="string">&#x27; */&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> weexFactoryPlugin = &#123;</span><br><span class="line">  intro () &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="string">&#x27;module.exports = function weexFactory (exports, document) &#123;&#x27;</span></span><br><span class="line">  &#125;,</span><br><span class="line">  outro () &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="string">&#x27;&#125;&#x27;</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//这里才是对应最后决定打包那个文件 alias 我们去看下</span></span><br><span class="line"><span class="keyword">const</span> aliases = <span class="built_in">require</span>(<span class="string">&#x27;./alias&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> resolve = <span class="function"><span class="params">p</span> =&gt;</span> &#123;</span><br><span class="line">  <span class="keyword">const</span> base = p.split(<span class="string">&#x27;/&#x27;</span>)[<span class="number">0</span>]</span><br><span class="line">  <span class="keyword">if</span> (aliases[base]) &#123;</span><br><span class="line">    <span class="keyword">return</span> path.resolve(aliases[base], p.slice(base.length + <span class="number">1</span>))</span><br><span class="line">  &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> path.resolve(__dirname, <span class="string">&#x27;../&#x27;</span>, p)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//这里就是所有打包文件所读取的配置项目 入口之类的 但是掉了一个resolve函数 做了对应的字符分割和处理 然后选中的 alias.js文件里的配置项 </span></span><br><span class="line"><span class="keyword">const</span> builds = &#123;</span><br><span class="line">  <span class="comment">// Runtime only (CommonJS). Used by bundlers e.g. Webpack &amp; Browserify</span></span><br><span class="line">  <span class="string">&#x27;web-runtime-cjs-dev&#x27;</span>: &#123;</span><br><span class="line">    entry: resolve(<span class="string">&#x27;web/entry-runtime.js&#x27;</span>),</span><br><span class="line">    dest: resolve(<span class="string">&#x27;dist/vue.runtime.common.dev.js&#x27;</span>),</span><br><span class="line">    format: <span class="string">&#x27;cjs&#x27;</span>,</span><br><span class="line">    env: <span class="string">&#x27;development&#x27;</span>,</span><br><span class="line">    banner</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="string">&#x27;web-runtime-cjs-prod&#x27;</span>: &#123;</span><br><span class="line">    entry: resolve(<span class="string">&#x27;web/entry-runtime.js&#x27;</span>),</span><br><span class="line">    dest: resolve(<span class="string">&#x27;dist/vue.runtime.common.prod.js&#x27;</span>),</span><br><span class="line">    format: <span class="string">&#x27;cjs&#x27;</span>,</span><br><span class="line">    env: <span class="string">&#x27;production&#x27;</span>,</span><br><span class="line">    banner</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="comment">// Runtime+compiler CommonJS build (CommonJS)</span></span><br><span class="line">  <span class="string">&#x27;web-full-cjs-dev&#x27;</span>: &#123;</span><br><span class="line">    entry: resolve(<span class="string">&#x27;web/entry-runtime-with-compiler.js&#x27;</span>),</span><br><span class="line">    dest: resolve(<span class="string">&#x27;dist/vue.common.dev.js&#x27;</span>),</span><br><span class="line">    format: <span class="string">&#x27;cjs&#x27;</span>,</span><br><span class="line">    env: <span class="string">&#x27;development&#x27;</span>,</span><br><span class="line">    alias: &#123; <span class="attr">he</span>: <span class="string">&#x27;./entity-decoder&#x27;</span> &#125;,</span><br><span class="line">    banner</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="string">&#x27;web-full-cjs-prod&#x27;</span>: &#123;</span><br><span class="line">    entry: resolve(<span class="string">&#x27;web/entry-runtime-with-compiler.js&#x27;</span>),</span><br><span class="line">    dest: resolve(<span class="string">&#x27;dist/vue.common.prod.js&#x27;</span>),</span><br><span class="line">    format: <span class="string">&#x27;cjs&#x27;</span>,</span><br><span class="line">    env: <span class="string">&#x27;production&#x27;</span>,</span><br><span class="line">    alias: &#123; <span class="attr">he</span>: <span class="string">&#x27;./entity-decoder&#x27;</span> &#125;,</span><br><span class="line">    banner</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="comment">// Runtime only ES modules build (for bundlers)</span></span><br><span class="line">  <span class="string">&#x27;web-runtime-esm&#x27;</span>: &#123;</span><br><span class="line">    entry: resolve(<span class="string">&#x27;web/entry-runtime.js&#x27;</span>),</span><br><span class="line">    dest: resolve(<span class="string">&#x27;dist/vue.runtime.esm.js&#x27;</span>),</span><br><span class="line">    format: <span class="string">&#x27;es&#x27;</span>,</span><br><span class="line">    banner</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="comment">// Runtime+compiler ES modules build (for bundlers)</span></span><br><span class="line">  <span class="string">&#x27;web-full-esm&#x27;</span>: &#123;</span><br><span class="line">    entry: resolve(<span class="string">&#x27;web/entry-runtime-with-compiler.js&#x27;</span>),</span><br><span class="line">    dest: resolve(<span class="string">&#x27;dist/vue.esm.js&#x27;</span>),</span><br><span class="line">    format: <span class="string">&#x27;es&#x27;</span>,</span><br><span class="line">    alias: &#123; <span class="attr">he</span>: <span class="string">&#x27;./entity-decoder&#x27;</span> &#125;,</span><br><span class="line">    banner</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="comment">// Runtime+compiler ES modules build (for direct import in browser)</span></span><br><span class="line">  <span class="string">&#x27;web-full-esm-browser-dev&#x27;</span>: &#123;</span><br><span class="line">    entry: resolve(<span class="string">&#x27;web/entry-runtime-with-compiler.js&#x27;</span>),</span><br><span class="line">    dest: resolve(<span class="string">&#x27;dist/vue.esm.browser.js&#x27;</span>),</span><br><span class="line">    format: <span class="string">&#x27;es&#x27;</span>,</span><br><span class="line">    transpile: <span class="literal">false</span>,</span><br><span class="line">    env: <span class="string">&#x27;development&#x27;</span>,</span><br><span class="line">    alias: &#123; <span class="attr">he</span>: <span class="string">&#x27;./entity-decoder&#x27;</span> &#125;,</span><br><span class="line">    banner</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="comment">// Runtime+compiler ES modules build (for direct import in browser)</span></span><br><span class="line">  <span class="string">&#x27;web-full-esm-browser-prod&#x27;</span>: &#123;</span><br><span class="line">    entry: resolve(<span class="string">&#x27;web/entry-runtime-with-compiler.js&#x27;</span>),</span><br><span class="line">    dest: resolve(<span class="string">&#x27;dist/vue.esm.browser.min.js&#x27;</span>),</span><br><span class="line">    format: <span class="string">&#x27;es&#x27;</span>,</span><br><span class="line">    transpile: <span class="literal">false</span>,</span><br><span class="line">    env: <span class="string">&#x27;production&#x27;</span>,</span><br><span class="line">    alias: &#123; <span class="attr">he</span>: <span class="string">&#x27;./entity-decoder&#x27;</span> &#125;,</span><br><span class="line">    banner</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="comment">// runtime-only build (Browser)</span></span><br><span class="line">  <span class="string">&#x27;web-runtime-dev&#x27;</span>: &#123;</span><br><span class="line">    entry: resolve(<span class="string">&#x27;web/entry-runtime.js&#x27;</span>),</span><br><span class="line">    dest: resolve(<span class="string">&#x27;dist/vue.runtime.js&#x27;</span>),</span><br><span class="line">    format: <span class="string">&#x27;umd&#x27;</span>,</span><br><span class="line">    env: <span class="string">&#x27;development&#x27;</span>,</span><br><span class="line">    banner</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="comment">// runtime-only production build (Browser)</span></span><br><span class="line">  <span class="string">&#x27;web-runtime-prod&#x27;</span>: &#123;</span><br><span class="line">    entry: resolve(<span class="string">&#x27;web/entry-runtime.js&#x27;</span>),</span><br><span class="line">    dest: resolve(<span class="string">&#x27;dist/vue.runtime.min.js&#x27;</span>),</span><br><span class="line">    format: <span class="string">&#x27;umd&#x27;</span>,</span><br><span class="line">    env: <span class="string">&#x27;production&#x27;</span>,</span><br><span class="line">    banner</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="comment">// Runtime+compiler development build (Browser)</span></span><br><span class="line">  <span class="string">&#x27;web-full-dev&#x27;</span>: &#123;</span><br><span class="line">    entry: resolve(<span class="string">&#x27;web/entry-runtime-with-compiler.js&#x27;</span>),</span><br><span class="line">    dest: resolve(<span class="string">&#x27;dist/vue.js&#x27;</span>),</span><br><span class="line">    format: <span class="string">&#x27;umd&#x27;</span>,</span><br><span class="line">    env: <span class="string">&#x27;development&#x27;</span>,</span><br><span class="line">    alias: &#123; <span class="attr">he</span>: <span class="string">&#x27;./entity-decoder&#x27;</span> &#125;,</span><br><span class="line">    banner</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="comment">// Runtime+compiler production build  (Browser)</span></span><br><span class="line">  <span class="string">&#x27;web-full-prod&#x27;</span>: &#123;</span><br><span class="line">    entry: resolve(<span class="string">&#x27;web/entry-runtime-with-compiler.js&#x27;</span>),</span><br><span class="line">    dest: resolve(<span class="string">&#x27;dist/vue.min.js&#x27;</span>),</span><br><span class="line">    format: <span class="string">&#x27;umd&#x27;</span>,</span><br><span class="line">    env: <span class="string">&#x27;production&#x27;</span>,</span><br><span class="line">    alias: &#123; <span class="attr">he</span>: <span class="string">&#x27;./entity-decoder&#x27;</span> &#125;,</span><br><span class="line">    banner</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="comment">// Web compiler (CommonJS).</span></span><br><span class="line">  <span class="string">&#x27;web-compiler&#x27;</span>: &#123;</span><br><span class="line">    entry: resolve(<span class="string">&#x27;web/entry-compiler.js&#x27;</span>),</span><br><span class="line">    dest: resolve(<span class="string">&#x27;packages/vue-template-compiler/build.js&#x27;</span>),</span><br><span class="line">    format: <span class="string">&#x27;cjs&#x27;</span>,</span><br><span class="line">    external: <span class="built_in">Object</span>.keys(<span class="built_in">require</span>(<span class="string">&#x27;../packages/vue-template-compiler/package.json&#x27;</span>).dependencies)</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="comment">// Web compiler (UMD for in-browser use).</span></span><br><span class="line">  <span class="string">&#x27;web-compiler-browser&#x27;</span>: &#123;</span><br><span class="line">    entry: resolve(<span class="string">&#x27;web/entry-compiler.js&#x27;</span>),</span><br><span class="line">    dest: resolve(<span class="string">&#x27;packages/vue-template-compiler/browser.js&#x27;</span>),</span><br><span class="line">    format: <span class="string">&#x27;umd&#x27;</span>,</span><br><span class="line">    env: <span class="string">&#x27;development&#x27;</span>,</span><br><span class="line">    moduleName: <span class="string">&#x27;VueTemplateCompiler&#x27;</span>,</span><br><span class="line">    plugins: [node(), cjs()]</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="comment">// Web server renderer (CommonJS).</span></span><br><span class="line">  <span class="string">&#x27;web-server-renderer-dev&#x27;</span>: &#123;</span><br><span class="line">    entry: resolve(<span class="string">&#x27;web/entry-server-renderer.js&#x27;</span>),</span><br><span class="line">    dest: resolve(<span class="string">&#x27;packages/vue-server-renderer/build.dev.js&#x27;</span>),</span><br><span class="line">    format: <span class="string">&#x27;cjs&#x27;</span>,</span><br><span class="line">    env: <span class="string">&#x27;development&#x27;</span>,</span><br><span class="line">    external: <span class="built_in">Object</span>.keys(<span class="built_in">require</span>(<span class="string">&#x27;../packages/vue-server-renderer/package.json&#x27;</span>).dependencies)</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="string">&#x27;web-server-renderer-prod&#x27;</span>: &#123;</span><br><span class="line">    entry: resolve(<span class="string">&#x27;web/entry-server-renderer.js&#x27;</span>),</span><br><span class="line">    dest: resolve(<span class="string">&#x27;packages/vue-server-renderer/build.prod.js&#x27;</span>),</span><br><span class="line">    format: <span class="string">&#x27;cjs&#x27;</span>,</span><br><span class="line">    env: <span class="string">&#x27;production&#x27;</span>,</span><br><span class="line">    external: <span class="built_in">Object</span>.keys(<span class="built_in">require</span>(<span class="string">&#x27;../packages/vue-server-renderer/package.json&#x27;</span>).dependencies)</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="string">&#x27;web-server-renderer-basic&#x27;</span>: &#123;</span><br><span class="line">    entry: resolve(<span class="string">&#x27;web/entry-server-basic-renderer.js&#x27;</span>),</span><br><span class="line">    dest: resolve(<span class="string">&#x27;packages/vue-server-renderer/basic.js&#x27;</span>),</span><br><span class="line">    format: <span class="string">&#x27;umd&#x27;</span>,</span><br><span class="line">    env: <span class="string">&#x27;development&#x27;</span>,</span><br><span class="line">    moduleName: <span class="string">&#x27;renderVueComponentToString&#x27;</span>,</span><br><span class="line">    plugins: [node(), cjs()]</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="string">&#x27;web-server-renderer-webpack-server-plugin&#x27;</span>: &#123;</span><br><span class="line">    entry: resolve(<span class="string">&#x27;server/webpack-plugin/server.js&#x27;</span>),</span><br><span class="line">    dest: resolve(<span class="string">&#x27;packages/vue-server-renderer/server-plugin.js&#x27;</span>),</span><br><span class="line">    format: <span class="string">&#x27;cjs&#x27;</span>,</span><br><span class="line">    external: <span class="built_in">Object</span>.keys(<span class="built_in">require</span>(<span class="string">&#x27;../packages/vue-server-renderer/package.json&#x27;</span>).dependencies)</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="string">&#x27;web-server-renderer-webpack-client-plugin&#x27;</span>: &#123;</span><br><span class="line">    entry: resolve(<span class="string">&#x27;server/webpack-plugin/client.js&#x27;</span>),</span><br><span class="line">    dest: resolve(<span class="string">&#x27;packages/vue-server-renderer/client-plugin.js&#x27;</span>),</span><br><span class="line">    format: <span class="string">&#x27;cjs&#x27;</span>,</span><br><span class="line">    external: <span class="built_in">Object</span>.keys(<span class="built_in">require</span>(<span class="string">&#x27;../packages/vue-server-renderer/package.json&#x27;</span>).dependencies)</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="comment">// Weex runtime factory</span></span><br><span class="line">  <span class="string">&#x27;weex-factory&#x27;</span>: &#123;</span><br><span class="line">    weex: <span class="literal">true</span>,</span><br><span class="line">    entry: resolve(<span class="string">&#x27;weex/entry-runtime-factory.js&#x27;</span>),</span><br><span class="line">    dest: resolve(<span class="string">&#x27;packages/weex-vue-framework/factory.js&#x27;</span>),</span><br><span class="line">    format: <span class="string">&#x27;cjs&#x27;</span>,</span><br><span class="line">    plugins: [weexFactoryPlugin]</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="comment">// Weex runtime framework (CommonJS).</span></span><br><span class="line">  <span class="string">&#x27;weex-framework&#x27;</span>: &#123;</span><br><span class="line">    weex: <span class="literal">true</span>,</span><br><span class="line">    entry: resolve(<span class="string">&#x27;weex/entry-framework.js&#x27;</span>),</span><br><span class="line">    dest: resolve(<span class="string">&#x27;packages/weex-vue-framework/index.js&#x27;</span>),</span><br><span class="line">    format: <span class="string">&#x27;cjs&#x27;</span></span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="comment">// Weex compiler (CommonJS). Used by Weex&#x27;s Webpack loader.</span></span><br><span class="line">  <span class="string">&#x27;weex-compiler&#x27;</span>: &#123;</span><br><span class="line">    weex: <span class="literal">true</span>,</span><br><span class="line">    entry: resolve(<span class="string">&#x27;weex/entry-compiler.js&#x27;</span>),</span><br><span class="line">    dest: resolve(<span class="string">&#x27;packages/weex-template-compiler/build.js&#x27;</span>),</span><br><span class="line">    format: <span class="string">&#x27;cjs&#x27;</span>,</span><br><span class="line">    external: <span class="built_in">Object</span>.keys(<span class="built_in">require</span>(<span class="string">&#x27;../packages/weex-template-compiler/package.json&#x27;</span>).dependencies)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">genConfig</span> (<span class="params">name</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">const</span> opts = builds[name]</span><br><span class="line">  <span class="keyword">const</span> config = &#123;</span><br><span class="line">    input: opts.entry,</span><br><span class="line">    external: opts.external,</span><br><span class="line">    plugins: [</span><br><span class="line">      flow(),</span><br><span class="line">      alias(<span class="built_in">Object</span>.assign(&#123;&#125;, aliases, opts.alias))</span><br><span class="line">    ].concat(opts.plugins || []),</span><br><span class="line">    output: &#123;</span><br><span class="line">      file: opts.dest,</span><br><span class="line">      format: opts.format,</span><br><span class="line">      banner: opts.banner,</span><br><span class="line">      name: opts.moduleName || <span class="string">&#x27;Vue&#x27;</span></span><br><span class="line">    &#125;,</span><br><span class="line">    onwarn: <span class="function">(<span class="params">msg, warn</span>) =&gt;</span> &#123;</span><br><span class="line">      <span class="keyword">if</span> (!<span class="regexp">/Circular/</span>.test(msg)) &#123;</span><br><span class="line">        warn(msg)</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="comment">// built-in vars</span></span><br><span class="line">  <span class="keyword">const</span> vars = &#123;</span><br><span class="line">    __WEEX__: !!opts.weex,</span><br><span class="line">    __WEEX_VERSION__: weexVersion,</span><br><span class="line">    __VERSION__: version</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="comment">// feature flags</span></span><br><span class="line">  <span class="built_in">Object</span>.keys(featureFlags).forEach(<span class="function"><span class="params">key</span> =&gt;</span> &#123;</span><br><span class="line">    vars[<span class="string">`process.env.<span class="subst">$&#123;key&#125;</span>`</span>] = featureFlags[key]</span><br><span class="line">  &#125;)</span><br><span class="line">  <span class="comment">// build-specific env</span></span><br><span class="line">  <span class="keyword">if</span> (opts.env) &#123;</span><br><span class="line">    vars[<span class="string">&#x27;process.env.NODE_ENV&#x27;</span>] = <span class="built_in">JSON</span>.stringify(opts.env)</span><br><span class="line">  &#125;</span><br><span class="line">  config.plugins.push(replace(vars))</span><br><span class="line"></span><br><span class="line">  <span class="keyword">if</span> (opts.transpile !== <span class="literal">false</span>) &#123;</span><br><span class="line">    config.plugins.push(buble())</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="built_in">Object</span>.defineProperty(config, <span class="string">&#x27;_name&#x27;</span>, &#123;</span><br><span class="line">    enumerable: <span class="literal">false</span>,</span><br><span class="line">    value: name</span><br><span class="line">  &#125;)</span><br><span class="line"></span><br><span class="line">  <span class="keyword">return</span> config</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">if</span> (process.env.TARGET) &#123;</span><br><span class="line">  <span class="built_in">module</span>.exports = genConfig(process.env.TARGET)</span><br><span class="line">&#125; <span class="keyword">else</span> &#123;</span><br><span class="line">  <span class="built_in">exports</span>.getBuild = genConfig</span><br><span class="line">  <span class="built_in">exports</span>.getAllBuilds = <span class="function">() =&gt;</span> <span class="built_in">Object</span>.keys(builds).map(genConfig)</span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//vue源码下的 alias.js文件</span></span><br><span class="line"><span class="comment">//这里就对应了他去打包了哪个</span></span><br><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">&#x27;path&#x27;</span>)</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> resolve = <span class="function"><span class="params">p</span> =&gt;</span> path.resolve(__dirname, <span class="string">&#x27;../&#x27;</span>, p)</span><br><span class="line"><span class="comment">//这里我们通过上面的配置文件可以看出 都是web开头的 所以我们在这个文件配置项里找到web 看看对应读取的是哪个文件</span></span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">  vue: resolve(<span class="string">&#x27;src/platforms/web/entry-runtime-with-compiler&#x27;</span>),</span><br><span class="line">  compiler: resolve(<span class="string">&#x27;src/compiler&#x27;</span>),</span><br><span class="line">  core: resolve(<span class="string">&#x27;src/core&#x27;</span>),</span><br><span class="line">  shared: resolve(<span class="string">&#x27;src/shared&#x27;</span>),</span><br><span class="line">  <span class="comment">//  platforms/web 这个路径就是我们的源码目录</span></span><br><span class="line">  web: resolve(<span class="string">&#x27;src/platforms/web&#x27;</span>),</span><br><span class="line">  weex: resolve(<span class="string">&#x27;src/platforms/weex&#x27;</span>),</span><br><span class="line">  server: resolve(<span class="string">&#x27;src/server&#x27;</span>),</span><br><span class="line">  sfc: resolve(<span class="string">&#x27;src/sfc&#x27;</span>)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h2 id="打包的之后的版本-一个是runtime-一个是-runtime-compiler"><a href="#打包的之后的版本-一个是runtime-一个是-runtime-compiler" class="headerlink" title="打包的之后的版本 一个是runtime 一个是 runtime + compiler"></a>打包的之后的版本 一个是runtime 一个是 runtime + compiler</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1.</span>runtime 就是官方推荐我们用的 体积比较小</span><br><span class="line"><span class="number">2.</span>runtime + compiler   多了一个compiler 打包文件  这个可以编译我们在<span class="keyword">new</span> Vue()的时候 会传进去一个template 主要是用来编译template的</span><br></pre></td></tr></table></figure>
<h2 id="Vue源码-SRC下的文件目录"><a href="#Vue源码-SRC下的文件目录" class="headerlink" title="Vue源码 SRC下的文件目录"></a>Vue源码 SRC下的文件目录</h2><p><img src="文件目录结构和作用.png" alt="源码文件结构和作用"></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1.</span>compiler 文件模块 主要用来 编译相关的 比如把你的模板 编译成 render函数</span><br><span class="line"><span class="number">2.</span>core 核心文件 响应式实现 </span><br><span class="line"><span class="number">3.</span>platforms  平台比如 你是web用  还是 手机用 之类的</span><br><span class="line"><span class="number">4.</span>server  服务端渲染相关的</span><br><span class="line"><span class="number">5.</span>sfc  解析.vue后缀的文件 </span><br><span class="line"><span class="number">6.</span>shared 共享的一些PC和手机端的方法和常量 </span><br><span class="line"><span class="number">7.</span>weex 做app相关的 </span><br></pre></td></tr></table></figure>
<h2 id="源码的入口文件"><a href="#源码的入口文件" class="headerlink" title="源码的入口文件"></a>源码的入口文件</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1.</span>这里我们看的是比较全的 带compiler的可以解析template的  entry-runtime-<span class="keyword">with</span>-compiler.js</span><br></pre></td></tr></table></figure>
<h2 id="入口文件-entry-runtime-with-compiler-js-都干了哪些事"><a href="#入口文件-entry-runtime-with-compiler-js-都干了哪些事" class="headerlink" title="入口文件 entry-runtime-with-compiler.js 都干了哪些事"></a>入口文件 entry-runtime-with-compiler.js 都干了哪些事</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1.</span>先把我们Vue构造函数原型的$mount拿了出来 做了劫持(切片) 然后又新写了一个新的$mount方法</span><br><span class="line"><span class="number">2.</span>覆盖的$mount里面 主要做的事就事把你的template 通过 <span class="keyword">import</span> &#123; compileToFunctions &#125; <span class="keyword">from</span> <span class="string">&#x27;./compiler/index&#x27;</span>下的方法 编译成render函数</span><br><span class="line"><span class="number">3.</span>主要做的事情 就是如果有模板就把模板变成render函数 再调我们原来的$mount方法</span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//这里把我们原型上的$mount方法 拿了出来</span></span><br><span class="line"><span class="keyword">const</span> mount = Vue.prototype.$mount</span><br><span class="line"><span class="comment">//然后又新写了一个新的$mount  最后又掉了我们拿出来那个原型上的方法 做了切片</span></span><br><span class="line">Vue.prototype.$mount = <span class="function"><span class="keyword">function</span> (<span class="params"> </span></span></span><br><span class="line"><span class="function"><span class="params">  el?: string | Element,</span></span></span><br><span class="line"><span class="function"><span class="params">  hydrating?: boolean</span></span></span><br><span class="line"><span class="function"><span class="params"></span>): <span class="title">Component</span> </span>&#123;</span><br><span class="line">  <span class="comment">//这里取查询了一下 你mount传进来的元素  </span></span><br><span class="line">  el = el &amp;&amp; query(el)</span><br><span class="line"></span><br><span class="line">  <span class="comment">//先看看 查出来的el是不是body元素 </span></span><br><span class="line">  <span class="keyword">if</span> (el === <span class="built_in">document</span>.body || el === <span class="built_in">document</span>.documentElement) &#123;</span><br><span class="line">    process.env.NODE_ENV !== <span class="string">&#x27;production&#x27;</span> &amp;&amp; warn(</span><br><span class="line">      <span class="string">`Do not mount Vue to &lt;html&gt; or &lt;body&gt; - mount to normal elements instead.`</span></span><br><span class="line">    )</span><br><span class="line">    <span class="keyword">return</span> <span class="built_in">this</span></span><br><span class="line">  &#125;</span><br><span class="line">  <span class="comment">//也就是最开始的时候 我要先查你有没有render函数 在看 你有没有template模板</span></span><br><span class="line">  <span class="comment">//然后看看 你在new Vue的时候 传进来的配置项 有没有render函数 </span></span><br><span class="line">  <span class="keyword">const</span> options = <span class="built_in">this</span>.$options</span><br><span class="line">  <span class="keyword">if</span> (!options.render) &#123;</span><br><span class="line">    <span class="comment">//如果没有 就看看 再看你有没有template模板   </span></span><br><span class="line">    <span class="keyword">let</span> template = options.template</span><br><span class="line">    <span class="keyword">if</span> (template) &#123;</span><br><span class="line">      <span class="comment">//如果有模板 我就把模板的内容拿出来  </span></span><br><span class="line">      <span class="keyword">if</span> (<span class="keyword">typeof</span> template === <span class="string">&#x27;string&#x27;</span>) &#123;</span><br><span class="line">        <span class="keyword">if</span> (template.charAt(<span class="number">0</span>) === <span class="string">&#x27;#&#x27;</span>) &#123;</span><br><span class="line">          <span class="comment">//这个idToTepmlate就是 拿去模板中的 innerHTML 详见源码本文件的中的方法 </span></span><br><span class="line">          template = idToTemplate(template) </span><br><span class="line">          <span class="comment">/* istanbul ignore if */</span></span><br><span class="line">          <span class="keyword">if</span> (process.env.NODE_ENV !== <span class="string">&#x27;production&#x27;</span> &amp;&amp; !template) &#123;</span><br><span class="line">            warn(</span><br><span class="line">              <span class="string">`Template element not found or is empty: <span class="subst">$&#123;options.template&#125;</span>`</span>,</span><br><span class="line">              <span class="built_in">this</span></span><br><span class="line">            )</span><br><span class="line">          &#125;</span><br><span class="line">        &#125;</span><br><span class="line">      &#125; <span class="keyword">else</span> <span class="keyword">if</span> (template.nodeType) &#123;</span><br><span class="line">        <span class="comment">//这里看看 你是不是一个元素的节点 如果是 把内容也拿出来  </span></span><br><span class="line">        template = template.innerHTML</span><br><span class="line">      &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">        <span class="keyword">if</span> (process.env.NODE_ENV !== <span class="string">&#x27;production&#x27;</span>) &#123;</span><br><span class="line">          warn(<span class="string">&#x27;invalid template option:&#x27;</span> + template, <span class="built_in">this</span>)</span><br><span class="line">        &#125;</span><br><span class="line">        <span class="keyword">return</span> <span class="built_in">this</span></span><br><span class="line">      &#125;</span><br><span class="line">    &#125; <span class="keyword">else</span> <span class="keyword">if</span> (el) &#123;</span><br><span class="line">      <span class="comment">//这里就是 如果你不是template进来的 而是我们最开是的 &lt;div&gt;这种方式&lt;/div&gt; 这样 我就把你变成模板</span></span><br><span class="line">      template = getOuterHTML(el)</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">if</span> (template) &#123;</span><br><span class="line">      <span class="comment">//以上那些都是没有模板我就处理成template 现在是把template编译成render函数</span></span><br><span class="line">      <span class="keyword">if</span> (process.env.NODE_ENV !== <span class="string">&#x27;production&#x27;</span> &amp;&amp; config.performance &amp;&amp; mark) &#123;</span><br><span class="line">        <span class="comment">//调用这里 把你的template变成render函数  </span></span><br><span class="line">        mark(<span class="string">&#x27;compile&#x27;</span>)</span><br><span class="line">      &#125;</span><br><span class="line">      <span class="comment">//这个过程就要解析模板 大致流程 ast语法树解析 先分词 语法拆分 变成ast语法树 在去生成字符串 最后把字符串 编译成函数</span></span><br><span class="line">      <span class="comment">//这里分成了两个方法   staticRenderFns 就是你是静态的元素 不会变 不需要重新渲染</span></span><br><span class="line">      <span class="keyword">const</span> &#123; render, staticRenderFns &#125; = compileToFunctions(template, &#123;</span><br><span class="line">        outputSourceRange: process.env.NODE_ENV !== <span class="string">&#x27;production&#x27;</span>,</span><br><span class="line">        shouldDecodeNewlines,</span><br><span class="line">        shouldDecodeNewlinesForHref,</span><br><span class="line">        delimiters: options.delimiters,</span><br><span class="line">        comments: options.comments</span><br><span class="line">      &#125;, <span class="built_in">this</span>)</span><br><span class="line">      options.render = render</span><br><span class="line">      options.staticRenderFns = staticRenderFns</span><br><span class="line"></span><br><span class="line">      <span class="comment">/* istanbul ignore if */</span></span><br><span class="line">      <span class="keyword">if</span> (process.env.NODE_ENV !== <span class="string">&#x27;production&#x27;</span> &amp;&amp; config.performance &amp;&amp; mark) &#123;</span><br><span class="line">        mark(<span class="string">&#x27;compile end&#x27;</span>)</span><br><span class="line">        measure(<span class="string">`vue <span class="subst">$&#123;<span class="built_in">this</span>._name&#125;</span> compile`</span>, <span class="string">&#x27;compile&#x27;</span>, <span class="string">&#x27;compile end&#x27;</span>)</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="comment">//这个mount是我们最开始从原型拿出来的那个方法</span></span><br><span class="line">  <span class="keyword">return</span> mount.call(<span class="built_in">this</span>, el, hydrating)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h2 id="rentime-index都干了哪些事"><a href="#rentime-index都干了哪些事" class="headerlink" title="rentime/index都干了哪些事"></a>rentime/index都干了哪些事</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1.</span>上面我们知道 把$mount方法 从Vue的原型拿了出来 这个Vue是从 <span class="keyword">import</span> Vue <span class="keyword">from</span> <span class="string">&#x27;./runtime/index&#x27;</span>到导入的</span><br><span class="line"><span class="number">2.</span>这里首先继承了你option的一些自定义指令 和你自己的些的组件 </span><br><span class="line"><span class="number">3.</span>对比了你的虚拟DOM 每次更新的时候渲染</span><br><span class="line"><span class="number">4.</span>真实的$mount方法</span><br><span class="line"><span class="number">5.</span>当然这里还是不是Vue的构造 是从 <span class="keyword">import</span> Vue <span class="keyword">from</span> <span class="string">&#x27;core/index&#x27;</span> 导入的</span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"><span class="keyword">import</span> Vue <span class="keyword">from</span> <span class="string">&#x27;core/index&#x27;</span></span><br><span class="line"><span class="keyword">import</span> config <span class="keyword">from</span> <span class="string">&#x27;core/config&#x27;</span></span><br><span class="line"><span class="keyword">import</span> &#123; extend, noop &#125; <span class="keyword">from</span> <span class="string">&#x27;shared/util&#x27;</span></span><br><span class="line"><span class="keyword">import</span> &#123; mountComponent &#125; <span class="keyword">from</span> <span class="string">&#x27;core/instance/lifecycle&#x27;</span></span><br><span class="line"><span class="keyword">import</span> &#123; devtools, inBrowser &#125; <span class="keyword">from</span> <span class="string">&#x27;core/util/index&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">import</span> &#123;</span><br><span class="line">  query,</span><br><span class="line">  mustUseProp,</span><br><span class="line">  isReservedTag,</span><br><span class="line">  isReservedAttr,</span><br><span class="line">  getTagNamespace,</span><br><span class="line">  isUnknownElement</span><br><span class="line">&#125; <span class="keyword">from</span> <span class="string">&#x27;web/util/index&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">import</span> &#123; patch &#125; <span class="keyword">from</span> <span class="string">&#x27;./patch&#x27;</span></span><br><span class="line"><span class="keyword">import</span> platformDirectives <span class="keyword">from</span> <span class="string">&#x27;./directives/index&#x27;</span></span><br><span class="line"><span class="keyword">import</span> platformComponents <span class="keyword">from</span> <span class="string">&#x27;./components/index&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// install platform specific utils</span></span><br><span class="line">Vue.config.mustUseProp = mustUseProp</span><br><span class="line">Vue.config.isReservedTag = isReservedTag</span><br><span class="line">Vue.config.isReservedAttr = isReservedAttr</span><br><span class="line">Vue.config.getTagNamespace = getTagNamespace</span><br><span class="line">Vue.config.isUnknownElement = isUnknownElement</span><br><span class="line"></span><br><span class="line"><span class="comment">//运行时 继承 你的自定义指令和你的组件 </span></span><br><span class="line">extend(Vue.options.directives, platformDirectives)</span><br><span class="line">extend(Vue.options.components, platformComponents)</span><br><span class="line"></span><br><span class="line"><span class="comment">//这里就是对比了重新渲染 虚拟DOM </span></span><br><span class="line">Vue.prototype.__patch__ = inBrowser ? patch : noop</span><br><span class="line"><span class="comment">//真是的mount方法 可以在运行时使用 也可以在编译时使用 </span></span><br><span class="line">Vue.prototype.$mount = <span class="function"><span class="keyword">function</span> (<span class="params"></span></span></span><br><span class="line"><span class="function"><span class="params">  el?: string | Element,</span></span></span><br><span class="line"><span class="function"><span class="params">  hydrating?: boolean</span></span></span><br><span class="line"><span class="function"><span class="params"></span>): <span class="title">Component</span> </span>&#123;</span><br><span class="line">  el = el &amp;&amp; inBrowser ? query(el) : <span class="literal">undefined</span></span><br><span class="line">  <span class="keyword">return</span> mountComponent(<span class="built_in">this</span>, el, hydrating)</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// devtools global hook</span></span><br><span class="line"><span class="comment">/* istanbul ignore next */</span></span><br><span class="line"><span class="keyword">if</span> (inBrowser) &#123;</span><br><span class="line">  <span class="built_in">setTimeout</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">if</span> (config.devtools) &#123;</span><br><span class="line">      <span class="keyword">if</span> (devtools) &#123;</span><br><span class="line">        devtools.emit(<span class="string">&#x27;init&#x27;</span>, Vue)</span><br><span class="line">      &#125; <span class="keyword">else</span> <span class="keyword">if</span> (</span><br><span class="line">        process.env.NODE_ENV !== <span class="string">&#x27;production&#x27;</span> &amp;&amp;</span><br><span class="line">        process.env.NODE_ENV !== <span class="string">&#x27;test&#x27;</span></span><br><span class="line">      ) &#123;</span><br><span class="line">        <span class="built_in">console</span>[<span class="built_in">console</span>.info ? <span class="string">&#x27;info&#x27;</span> : <span class="string">&#x27;log&#x27;</span>](</span><br><span class="line">          <span class="string">&#x27;Download the Vue Devtools extension for a better development experience:\n&#x27;</span> +</span><br><span class="line">          <span class="string">&#x27;https://github.com/vuejs/vue-devtools&#x27;</span></span><br><span class="line">        )</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">if</span> (process.env.NODE_ENV !== <span class="string">&#x27;production&#x27;</span> &amp;&amp;</span><br><span class="line">      process.env.NODE_ENV !== <span class="string">&#x27;test&#x27;</span> &amp;&amp;</span><br><span class="line">      config.productionTip !== <span class="literal">false</span> &amp;&amp;</span><br><span class="line">      <span class="keyword">typeof</span> <span class="built_in">console</span> !== <span class="string">&#x27;undefined&#x27;</span></span><br><span class="line">    ) &#123;</span><br><span class="line">      <span class="built_in">console</span>[<span class="built_in">console</span>.info ? <span class="string">&#x27;info&#x27;</span> : <span class="string">&#x27;log&#x27;</span>](</span><br><span class="line">        <span class="string">`You are running Vue in development mode.\n`</span> +</span><br><span class="line">        <span class="string">`Make sure to turn on production mode when deploying for production.\n`</span> +</span><br><span class="line">        <span class="string">`See more tips at https://vuejs.org/guide/deployment.html`</span></span><br><span class="line">      )</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;, <span class="number">0</span>)</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> Vue</span><br><span class="line"></span><br></pre></td></tr></table></figure>
<h2 id="core-index-都干了哪些事"><a href="#core-index-都干了哪些事" class="headerlink" title="core/index 都干了哪些事"></a>core/index 都干了哪些事</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1.</span>初始化了全局API 主要能.出来的 都在 initGlobalAPI(Vue) 这里</span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> Vue <span class="keyword">from</span> <span class="string">&#x27;./instance/index&#x27;</span></span><br><span class="line"><span class="keyword">import</span> &#123; initGlobalAPI &#125; <span class="keyword">from</span> <span class="string">&#x27;./global-api/index&#x27;</span></span><br><span class="line"><span class="keyword">import</span> &#123; isServerRendering &#125; <span class="keyword">from</span> <span class="string">&#x27;core/util/env&#x27;</span></span><br><span class="line"><span class="keyword">import</span> &#123; FunctionalRenderContext &#125; <span class="keyword">from</span> <span class="string">&#x27;core/vdom/create-functional-component&#x27;</span></span><br><span class="line"><span class="comment">//这里就是出初始了Vue的所有方法</span></span><br><span class="line">initGlobalAPI(Vue)</span><br><span class="line"></span><br><span class="line"><span class="built_in">Object</span>.defineProperty(Vue.prototype, <span class="string">&#x27;$isServer&#x27;</span>, &#123;</span><br><span class="line">  get: isServerRendering</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="built_in">Object</span>.defineProperty(Vue.prototype, <span class="string">&#x27;$ssrContext&#x27;</span>, &#123;</span><br><span class="line">  get () &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="built_in">this</span>.$vnode &amp;&amp; <span class="built_in">this</span>.$vnode.ssrContext</span><br><span class="line">  &#125;</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="built_in">Object</span>.defineProperty(Vue, <span class="string">&#x27;FunctionalRenderContext&#x27;</span>, &#123;</span><br><span class="line">  value: FunctionalRenderContext</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">Vue.version = <span class="string">&#x27;__VERSION__&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> Vue</span><br><span class="line"></span><br></pre></td></tr></table></figure>
<h2 id="global-api-index都干了什么事"><a href="#global-api-index都干了什么事" class="headerlink" title="global-api/index都干了什么事"></a>global-api/index都干了什么事</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1.</span>初始化了所有vue能.出来的</span><br><span class="line"><span class="number">2.</span>响应式的核心原理 defineReactive核心方法</span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* @flow */</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">import</span> config <span class="keyword">from</span> <span class="string">&#x27;../config&#x27;</span></span><br><span class="line"><span class="keyword">import</span> &#123; initUse &#125; <span class="keyword">from</span> <span class="string">&#x27;./use&#x27;</span></span><br><span class="line"><span class="keyword">import</span> &#123; initMixin &#125; <span class="keyword">from</span> <span class="string">&#x27;./mixin&#x27;</span></span><br><span class="line"><span class="keyword">import</span> &#123; initExtend &#125; <span class="keyword">from</span> <span class="string">&#x27;./extend&#x27;</span></span><br><span class="line"><span class="keyword">import</span> &#123; initAssetRegisters &#125; <span class="keyword">from</span> <span class="string">&#x27;./assets&#x27;</span></span><br><span class="line"><span class="keyword">import</span> &#123; set, del &#125; <span class="keyword">from</span> <span class="string">&#x27;../observer/index&#x27;</span></span><br><span class="line"><span class="keyword">import</span> &#123; ASSET_TYPES &#125; <span class="keyword">from</span> <span class="string">&#x27;shared/constants&#x27;</span></span><br><span class="line"><span class="keyword">import</span> builtInComponents <span class="keyword">from</span> <span class="string">&#x27;../components/index&#x27;</span></span><br><span class="line"><span class="keyword">import</span> &#123; observe &#125; <span class="keyword">from</span> <span class="string">&#x27;core/observer/index&#x27;</span></span><br><span class="line"><span class="comment">//这里导入了我们核心的一些方法 比如响应式 下一队列 $set  响应式核心 defineReactive</span></span><br><span class="line"><span class="keyword">import</span> &#123;</span><br><span class="line">  warn,</span><br><span class="line">  extend,</span><br><span class="line">  nextTick, <span class="comment">//下一任务队列 下一事件环 </span></span><br><span class="line">  mergeOptions,</span><br><span class="line">  defineReactive <span class="comment">//核心 数据响应式</span></span><br><span class="line">&#125; <span class="keyword">from</span> <span class="string">&#x27;../util/index&#x27;</span></span><br><span class="line"><span class="comment">//初始化Vue的方法</span></span><br><span class="line"><span class="keyword">export</span> <span class="function"><span class="keyword">function</span> <span class="title">initGlobalAPI</span> (<span class="params">Vue: GlobalAPI</span>) </span>&#123;</span><br><span class="line">  <span class="comment">// config</span></span><br><span class="line">  <span class="keyword">const</span> configDef = &#123;&#125;</span><br><span class="line">  configDef.get = <span class="function">() =&gt;</span> config</span><br><span class="line">  <span class="keyword">if</span> (process.env.NODE_ENV !== <span class="string">&#x27;production&#x27;</span>) &#123;</span><br><span class="line">    configDef.set = <span class="function">() =&gt;</span> &#123;</span><br><span class="line">      warn(</span><br><span class="line">        <span class="string">&#x27;Do not replace the Vue.config object, set individual fields instead.&#x27;</span></span><br><span class="line">      )</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="built_in">Object</span>.defineProperty(Vue, <span class="string">&#x27;config&#x27;</span>, configDef)</span><br><span class="line"></span><br><span class="line">  <span class="comment">//核心工具</span></span><br><span class="line">  Vue.util = &#123;</span><br><span class="line">    warn,</span><br><span class="line">    extend,</span><br><span class="line">    mergeOptions,</span><br><span class="line">    defineReactive <span class="comment">//Vue响应式核心 defineProperty</span></span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  Vue.set = set</span><br><span class="line">  Vue.delete = del</span><br><span class="line">  Vue.nextTick = nextTick</span><br><span class="line"></span><br><span class="line">  <span class="comment">// 2.6 explicit observable API</span></span><br><span class="line">  Vue.observable = &lt;T&gt;(obj: T): <span class="function"><span class="params">T</span> =&gt;</span> &#123;</span><br><span class="line">    observe(obj)</span><br><span class="line">    <span class="keyword">return</span> obj</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  Vue.options = <span class="built_in">Object</span>.create(<span class="literal">null</span>)</span><br><span class="line">  ASSET_TYPES.forEach(<span class="function"><span class="params">type</span> =&gt;</span> &#123;</span><br><span class="line">    Vue.options[type + <span class="string">&#x27;s&#x27;</span>] = <span class="built_in">Object</span>.create(<span class="literal">null</span>)</span><br><span class="line">  &#125;)</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">  Vue.options._base = Vue</span><br><span class="line"></span><br><span class="line">  extend(Vue.options.components, builtInComponents)</span><br><span class="line">  <span class="comment">//初始化了use方法</span></span><br><span class="line">  initUse(Vue)</span><br><span class="line">  <span class="comment">//初始化了混合方法  </span></span><br><span class="line">  initMixin(Vue)</span><br><span class="line">  <span class="comment">//初始化了继承方法  </span></span><br><span class="line">  initExtend(Vue)</span><br><span class="line">  initAssetRegisters(Vue)</span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>
<h2 id="globalAPI-函数-初始化的全局API"><a href="#globalAPI-函数-初始化的全局API" class="headerlink" title="globalAPI  函数 初始化的全局API"></a>globalAPI  函数 初始化的全局API</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//nextTick 下一事件环 </span></span><br><span class="line"><span class="comment">//每次调的时候 都会把你传进来的调用的函数 存放在cb里 一个数组 然后在从队列里去调</span></span><br><span class="line"><span class="keyword">export</span> <span class="function"><span class="keyword">function</span> <span class="title">nextTick</span> (<span class="params">cb?: <span class="built_in">Function</span>, ctx?: <span class="built_in">Object</span></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">let</span> _resolve</span><br><span class="line">  callbacks.push(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">if</span> (cb) &#123;</span><br><span class="line">      <span class="keyword">try</span> &#123;</span><br><span class="line">        cb.call(ctx)</span><br><span class="line">      &#125; <span class="keyword">catch</span> (e) &#123;</span><br><span class="line">        handleError(e, ctx, <span class="string">&#x27;nextTick&#x27;</span>)</span><br><span class="line">      &#125;</span><br><span class="line">    &#125; <span class="keyword">else</span> <span class="keyword">if</span> (_resolve) &#123;</span><br><span class="line">      _resolve(ctx)</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;)</span><br><span class="line">  <span class="keyword">if</span> (!pending) &#123;</span><br><span class="line">    pending = <span class="literal">true</span></span><br><span class="line">    timerFunc()</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="comment">// $flow-disable-line</span></span><br><span class="line">  <span class="keyword">if</span> (!cb &amp;&amp; <span class="keyword">typeof</span> <span class="built_in">Promise</span> !== <span class="string">&#x27;undefined&#x27;</span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function"><span class="params">resolve</span> =&gt;</span> &#123;</span><br><span class="line">      _resolve = resolve</span><br><span class="line">    &#125;)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//initUse(Vue)  =&gt; Vue.use()</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">import</span> &#123; toArray &#125; <span class="keyword">from</span> <span class="string">&#x27;../util/index&#x27;</span></span><br><span class="line"><span class="comment">//Vue.use(xxx,&#x27;123&#x27;,123) 然后把this也就是Vue插入到最前面</span></span><br><span class="line"><span class="keyword">export</span> <span class="function"><span class="keyword">function</span> <span class="title">initUse</span> (<span class="params">Vue: GlobalAPI</span>) </span>&#123;</span><br><span class="line">  <span class="comment">//声明了一个函数 函数里传的是插件  </span></span><br><span class="line">  Vue.use = <span class="function"><span class="keyword">function</span> (<span class="params">plugin: <span class="built_in">Function</span> | <span class="built_in">Object</span></span>) </span>&#123;</span><br><span class="line">    <span class="comment">//然后这里看看你是否传过了插件 防止插件重复  </span></span><br><span class="line">    <span class="keyword">const</span> installedPlugins = (<span class="built_in">this</span>._installedPlugins || (<span class="built_in">this</span>._installedPlugins = []))</span><br><span class="line">    <span class="keyword">if</span> (installedPlugins.indexOf(plugin) &gt; -<span class="number">1</span>) &#123;</span><br><span class="line">      <span class="keyword">return</span> <span class="built_in">this</span></span><br><span class="line">    &#125;</span><br><span class="line">	<span class="comment">//把你传进来的插件 组成一个数组 </span></span><br><span class="line">    <span class="keyword">const</span> args = toArray(<span class="built_in">arguments</span>, <span class="number">1</span>)</span><br><span class="line">    args.unshift(<span class="built_in">this</span>)</span><br><span class="line">    <span class="comment">//调这个插件的install方法  </span></span><br><span class="line">    <span class="keyword">if</span> (<span class="keyword">typeof</span> plugin.install === <span class="string">&#x27;function&#x27;</span>) &#123;</span><br><span class="line">      plugin.install.apply(plugin, args)</span><br><span class="line">    &#125; <span class="keyword">else</span> <span class="keyword">if</span> (<span class="keyword">typeof</span> plugin === <span class="string">&#x27;function&#x27;</span>) &#123;</span><br><span class="line">      plugin.apply(<span class="literal">null</span>, args)</span><br><span class="line">    &#125;</span><br><span class="line">    installedPlugins.push(plugin)</span><br><span class="line">    <span class="keyword">return</span> <span class="built_in">this</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// initMixin(Vue) =&gt; vue.mixin 把当前对象和以前对象合并 如果重名变成数组 </span></span><br><span class="line"><span class="keyword">import</span> &#123; mergeOptions &#125; <span class="keyword">from</span> <span class="string">&#x27;../util/index&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="function"><span class="keyword">function</span> <span class="title">initMixin</span> (<span class="params">Vue: GlobalAPI</span>) </span>&#123;</span><br><span class="line">  Vue.mixin = <span class="function"><span class="keyword">function</span> (<span class="params">mixin: <span class="built_in">Object</span></span>) </span>&#123;</span><br><span class="line">    <span class="comment">//就是把重名的变成一个数组 然后把你的两个东西合并  </span></span><br><span class="line">    <span class="built_in">this</span>.options = mergeOptions(<span class="built_in">this</span>.options, mixin)</span><br><span class="line">    <span class="keyword">return</span> <span class="built_in">this</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//initExtend(Vue) =&gt; Vue.extend 产生一个子类 比如组件 然后继承Vue的方法</span></span><br><span class="line"></span><br><span class="line"><span class="comment">/* @flow */</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">import</span> &#123; ASSET_TYPES &#125; <span class="keyword">from</span> <span class="string">&#x27;shared/constants&#x27;</span></span><br><span class="line"><span class="keyword">import</span> &#123; defineComputed, proxy &#125; <span class="keyword">from</span> <span class="string">&#x27;../instance/state&#x27;</span></span><br><span class="line"><span class="keyword">import</span> &#123; extend, mergeOptions, validateComponentName &#125; <span class="keyword">from</span> <span class="string">&#x27;../util/index&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="function"><span class="keyword">function</span> <span class="title">initExtend</span> (<span class="params">Vue: GlobalAPI</span>) </span>&#123;</span><br><span class="line">  <span class="comment">/**</span></span><br><span class="line"><span class="comment">   * Each instance constructor, including Vue, has a unique</span></span><br><span class="line"><span class="comment">   * cid. This enables us to create wrapped &quot;child</span></span><br><span class="line"><span class="comment">   * constructors&quot; for prototypal inheritance and cache them.</span></span><br><span class="line"><span class="comment">   */</span></span><br><span class="line">  Vue.cid = <span class="number">0</span></span><br><span class="line">  <span class="keyword">let</span> cid = <span class="number">1</span></span><br><span class="line"></span><br><span class="line">  <span class="comment">/**</span></span><br><span class="line"><span class="comment">   * Class inheritance</span></span><br><span class="line"><span class="comment">   */</span></span><br><span class="line">  Vue.extend = <span class="function"><span class="keyword">function</span> (<span class="params">extendOptions: <span class="built_in">Object</span></span>): <span class="title">Function</span> </span>&#123;</span><br><span class="line">    extendOptions = extendOptions || &#123;&#125;</span><br><span class="line">    <span class="keyword">const</span> Super = <span class="built_in">this</span></span><br><span class="line">    <span class="keyword">const</span> SuperId = Super.cid</span><br><span class="line">    <span class="keyword">const</span> cachedCtors = extendOptions._Ctor || (extendOptions._Ctor = &#123;&#125;)</span><br><span class="line">    <span class="keyword">if</span> (cachedCtors[SuperId]) &#123;</span><br><span class="line">      <span class="keyword">return</span> cachedCtors[SuperId]</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">const</span> name = extendOptions.name || Super.options.name</span><br><span class="line">    <span class="keyword">if</span> (process.env.NODE_ENV !== <span class="string">&#x27;production&#x27;</span> &amp;&amp; name) &#123;</span><br><span class="line">      validateComponentName(name)</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">const</span> Sub = <span class="function"><span class="keyword">function</span> <span class="title">VueComponent</span> (<span class="params">options</span>) </span>&#123;</span><br><span class="line">      <span class="comment">//每个组件都会调用这个方法  </span></span><br><span class="line">      <span class="built_in">this</span>._init(options)</span><br><span class="line">    &#125;</span><br><span class="line">    Sub.prototype = <span class="built_in">Object</span>.create(Super.prototype)</span><br><span class="line">    Sub.prototype.constructor = Sub</span><br><span class="line">    Sub.cid = cid++</span><br><span class="line">    Sub.options = mergeOptions(</span><br><span class="line">      Super.options,</span><br><span class="line">      extendOptions</span><br><span class="line">    )</span><br><span class="line">    Sub[<span class="string">&#x27;super&#x27;</span>] = Super</span><br><span class="line"></span><br><span class="line">    <span class="comment">// For props and computed properties, we define the proxy getters on</span></span><br><span class="line">    <span class="comment">// the Vue instances at extension time, on the extended prototype. This</span></span><br><span class="line">    <span class="comment">// avoids Object.defineProperty calls for each instance created.</span></span><br><span class="line">    <span class="keyword">if</span> (Sub.options.props) &#123;</span><br><span class="line">      initProps(Sub)</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">if</span> (Sub.options.computed) &#123;</span><br><span class="line">      initComputed(Sub)</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="comment">// allow further extension/mixin/plugin usage</span></span><br><span class="line">    Sub.extend = Super.extend</span><br><span class="line">    Sub.mixin = Super.mixin</span><br><span class="line">    Sub.use = Super.use</span><br><span class="line"></span><br><span class="line">    <span class="comment">// create asset registers, so extended classes</span></span><br><span class="line">    <span class="comment">// can have their private assets too.</span></span><br><span class="line">    ASSET_TYPES.forEach(<span class="function"><span class="keyword">function</span> (<span class="params">type</span>) </span>&#123;</span><br><span class="line">      Sub[type] = Super[type]</span><br><span class="line">    &#125;)</span><br><span class="line">    <span class="comment">// enable recursive self-lookup</span></span><br><span class="line">    <span class="keyword">if</span> (name) &#123;</span><br><span class="line">      Sub.options.components[name] = Sub</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="comment">// keep a reference to the super options at extension time.</span></span><br><span class="line">    <span class="comment">// later at instantiation we can check if Super&#x27;s options have</span></span><br><span class="line">    <span class="comment">// been updated.</span></span><br><span class="line">    Sub.superOptions = Super.options</span><br><span class="line">    Sub.extendOptions = extendOptions</span><br><span class="line">    Sub.sealedOptions = extend(&#123;&#125;, Sub.options)</span><br><span class="line"></span><br><span class="line">    <span class="comment">// cache constructor</span></span><br><span class="line">    cachedCtors[SuperId] = Sub</span><br><span class="line">    <span class="keyword">return</span> Sub</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">initProps</span> (<span class="params">Comp</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">const</span> props = Comp.options.props</span><br><span class="line">  <span class="keyword">for</span> (<span class="keyword">const</span> key <span class="keyword">in</span> props) &#123;</span><br><span class="line">    proxy(Comp.prototype, <span class="string">`_props`</span>, key)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">initComputed</span> (<span class="params">Comp</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">const</span> computed = Comp.options.computed</span><br><span class="line">  <span class="keyword">for</span> (<span class="keyword">const</span> key <span class="keyword">in</span> computed) &#123;</span><br><span class="line">    defineComputed(Comp.prototype, key, computed[key])</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>
<h2 id="instance-index-真实的Vue-都干了哪些事"><a href="#instance-index-真实的Vue-都干了哪些事" class="headerlink" title="instance/index 真实的Vue 都干了哪些事"></a>instance/index 真实的Vue 都干了哪些事</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1.</span>真实的Vue的构造函数    <span class="keyword">import</span> Vue <span class="keyword">from</span> <span class="string">&#x27;./instance/index&#x27;</span> </span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; initMixin &#125; <span class="keyword">from</span> <span class="string">&#x27;./init&#x27;</span></span><br><span class="line"><span class="keyword">import</span> &#123; stateMixin &#125; <span class="keyword">from</span> <span class="string">&#x27;./state&#x27;</span></span><br><span class="line"><span class="keyword">import</span> &#123; renderMixin &#125; <span class="keyword">from</span> <span class="string">&#x27;./render&#x27;</span></span><br><span class="line"><span class="keyword">import</span> &#123; eventsMixin &#125; <span class="keyword">from</span> <span class="string">&#x27;./events&#x27;</span></span><br><span class="line"><span class="keyword">import</span> &#123; lifecycleMixin &#125; <span class="keyword">from</span> <span class="string">&#x27;./lifecycle&#x27;</span></span><br><span class="line"><span class="keyword">import</span> &#123; warn &#125; <span class="keyword">from</span> <span class="string">&#x27;../util/index&#x27;</span></span><br><span class="line"><span class="comment">//真是的Vue的构造函数</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Vue</span> (<span class="params">options</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">if</span> (process.env.NODE_ENV !== <span class="string">&#x27;production&#x27;</span> &amp;&amp;</span><br><span class="line">    !(<span class="built_in">this</span> <span class="keyword">instanceof</span> Vue)</span><br><span class="line">  ) &#123;</span><br><span class="line">    warn(<span class="string">&#x27;Vue is a constructor and should be called with the `new` keyword&#x27;</span>)</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="comment">//一使用Vue 有就是new Vue 就会调用init方法  </span></span><br><span class="line">  <span class="built_in">this</span>._init(options)</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//给当前实例添加属性和方法  下面这些就是 向Vue的原型上 添加方法</span></span><br><span class="line">initMixin(Vue)  <span class="comment">//初始化 mixin 方法</span></span><br><span class="line">stateMixin(Vue) <span class="comment">//混合了状态 </span></span><br><span class="line">eventsMixin(Vue) <span class="comment">//实现了Vue的发布订阅模式  $on $emit</span></span><br><span class="line">lifecycleMixin(Vue) <span class="comment">//更新视图的钩子 beforupdate钩子 和 update钩子</span></span><br><span class="line">renderMixin(Vue)  <span class="comment">//把render方法 挂在到了Vue的原型上 Vue.protoType._render</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> Vue</span><br></pre></td></tr></table></figure>
<h2 id="initMixin-Vue-方法"><a href="#initMixin-Vue-方法" class="headerlink" title="initMixin(Vue)方法"></a>initMixin(Vue)方法</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//在原型上添加了_init方法 让自己的或者组件都产生了了一个唯一的ID </span></span><br><span class="line"><span class="comment">// 舒适化了组件的父子关系 谁是爸爸儿子孙子 初始化了发布订阅</span></span><br><span class="line"><span class="comment">//然后开始走 beforeCreate 钩子函数 找身上有没有provid 然后舒适化了prop methods computed watch 等等</span></span><br><span class="line"><span class="comment">// 注入了 provid 放进了 inject的回调钩子里 然后开始执行created钩子</span></span><br><span class="line"><span class="comment">//开始渲染视图调用 $mount方法</span></span><br><span class="line"><span class="keyword">import</span> config <span class="keyword">from</span> <span class="string">&#x27;../config&#x27;</span></span><br><span class="line"><span class="keyword">import</span> &#123; initProxy &#125; <span class="keyword">from</span> <span class="string">&#x27;./proxy&#x27;</span></span><br><span class="line"><span class="keyword">import</span> &#123; initState &#125; <span class="keyword">from</span> <span class="string">&#x27;./state&#x27;</span></span><br><span class="line"><span class="keyword">import</span> &#123; initRender &#125; <span class="keyword">from</span> <span class="string">&#x27;./render&#x27;</span></span><br><span class="line"><span class="keyword">import</span> &#123; initEvents &#125; <span class="keyword">from</span> <span class="string">&#x27;./events&#x27;</span></span><br><span class="line"><span class="keyword">import</span> &#123; mark, measure &#125; <span class="keyword">from</span> <span class="string">&#x27;../util/perf&#x27;</span></span><br><span class="line"><span class="keyword">import</span> &#123; initLifecycle, callHook &#125; <span class="keyword">from</span> <span class="string">&#x27;./lifecycle&#x27;</span></span><br><span class="line"><span class="keyword">import</span> &#123; initProvide, initInjections &#125; <span class="keyword">from</span> <span class="string">&#x27;./inject&#x27;</span></span><br><span class="line"><span class="keyword">import</span> &#123; extend, mergeOptions, formatComponentName &#125; <span class="keyword">from</span> <span class="string">&#x27;../util/index&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> uid = <span class="number">0</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="function"><span class="keyword">function</span> <span class="title">initMixin</span> (<span class="params">Vue: Class&lt;Component&gt;</span>) </span>&#123;</span><br><span class="line">  <span class="comment">//在原型上 添加了_init 方法</span></span><br><span class="line">  Vue.prototype._init = <span class="function"><span class="keyword">function</span> (<span class="params">options?: <span class="built_in">Object</span></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">const</span> vm: Component = <span class="built_in">this</span></span><br><span class="line">    <span class="comment">//这里就是每个实例和组件 都有一个唯一的属性ID</span></span><br><span class="line">    vm._uid = uid++</span><br><span class="line">    <span class="keyword">let</span> startTag, endTag</span><br><span class="line">    <span class="comment">/* istanbul ignore if */</span></span><br><span class="line">    <span class="keyword">if</span> (process.env.NODE_ENV !== <span class="string">&#x27;production&#x27;</span> &amp;&amp; config.performance &amp;&amp; mark) &#123;</span><br><span class="line">      startTag = <span class="string">`vue-perf-start:<span class="subst">$&#123;vm._uid&#125;</span>`</span></span><br><span class="line">      endTag = <span class="string">`vue-perf-end:<span class="subst">$&#123;vm._uid&#125;</span>`</span></span><br><span class="line">      mark(startTag)</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    vm._isVue = <span class="literal">true</span></span><br><span class="line">    <span class="keyword">if</span> (options &amp;&amp; options._isComponent) &#123;</span><br><span class="line">      initInternalComponent(vm, options)</span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">      vm.$options = mergeOptions(</span><br><span class="line">        resolveConstructorOptions(vm.constructor),</span><br><span class="line">        options || &#123;&#125;,</span><br><span class="line">        vm</span><br><span class="line">      )</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="comment">/* istanbul ignore else */</span></span><br><span class="line">    <span class="keyword">if</span> (process.env.NODE_ENV !== <span class="string">&#x27;production&#x27;</span>) &#123;</span><br><span class="line">      initProxy(vm)</span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">      vm._renderProxy = vm</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="comment">//然后在这里 又初始化了一大堆方法 </span></span><br><span class="line">    vm._self = vm</span><br><span class="line">    initLifecycle(vm) <span class="comment">//初始化生命周期 这里跟Vue的生命周期没有任何关系 这里是组件的关系 谁是爸爸 谁是儿子 谁是孙子 初始化了父子关系</span></span><br><span class="line">    initEvents(vm) <span class="comment">//类似node eventEmitter  初始化了 一个空对象</span></span><br><span class="line">    initRender(vm) <span class="comment">//初始了 vm.$createElement</span></span><br><span class="line">    callHook(vm, <span class="string">&#x27;beforeCreate&#x27;</span>) <span class="comment">//然后执行了 beforeCreate方法 Vue的生命周期开始 是一个数组</span></span><br><span class="line">    initInjections(vm) <span class="comment">//注入器 先找自己有没有_provide  然后在去上面一层一层找 </span></span><br><span class="line">    initState(vm) <span class="comment">//初始化了状态 比如prop methods data computed watch 等等 MVVM</span></span><br><span class="line">    initProvide(vm) <span class="comment">// 注入_provide 给自己身上定义这个属性 然后放在回调里 等initInjections 不停的去找</span></span><br><span class="line">    callHook(vm, <span class="string">&#x27;created&#x27;</span>) <span class="comment">//调用了 created 方法 </span></span><br><span class="line"></span><br><span class="line">    <span class="comment">/* istanbul ignore if */</span></span><br><span class="line">    <span class="keyword">if</span> (process.env.NODE_ENV !== <span class="string">&#x27;production&#x27;</span> &amp;&amp; config.performance &amp;&amp; mark) &#123;</span><br><span class="line">      vm._name = formatComponentName(vm, <span class="literal">false</span>)</span><br><span class="line">      mark(endTag)</span><br><span class="line">      measure(<span class="string">`vue <span class="subst">$&#123;vm._name&#125;</span> init`</span>, startTag, endTag)</span><br><span class="line">    &#125;</span><br><span class="line">	<span class="comment">//如果用户有传进来el 就调用$mount方法 真实的$mount</span></span><br><span class="line">    <span class="keyword">if</span> (vm.$options.el) &#123;</span><br><span class="line">      vm.$mount(vm.$options.el)</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="function"><span class="keyword">function</span> <span class="title">initInternalComponent</span> (<span class="params">vm: Component, options: InternalComponentOptions</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">const</span> opts = vm.$options = <span class="built_in">Object</span>.create(vm.constructor.options)</span><br><span class="line">  <span class="comment">// doing this because it&#x27;s faster than dynamic enumeration.</span></span><br><span class="line">  <span class="keyword">const</span> parentVnode = options._parentVnode</span><br><span class="line">  opts.parent = options.parent</span><br><span class="line">  opts._parentVnode = parentVnode</span><br><span class="line"></span><br><span class="line">  <span class="keyword">const</span> vnodeComponentOptions = parentVnode.componentOptions</span><br><span class="line">  opts.propsData = vnodeComponentOptions.propsData</span><br><span class="line">  opts._parentListeners = vnodeComponentOptions.listeners</span><br><span class="line">  opts._renderChildren = vnodeComponentOptions.children</span><br><span class="line">  opts._componentTag = vnodeComponentOptions.tag</span><br><span class="line"></span><br><span class="line">  <span class="keyword">if</span> (options.render) &#123;</span><br><span class="line">    opts.render = options.render</span><br><span class="line">    opts.staticRenderFns = options.staticRenderFns</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="function"><span class="keyword">function</span> <span class="title">resolveConstructorOptions</span> (<span class="params">Ctor: Class&lt;Component&gt;</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">let</span> options = Ctor.options</span><br><span class="line">  <span class="keyword">if</span> (Ctor.super) &#123;</span><br><span class="line">    <span class="keyword">const</span> superOptions = resolveConstructorOptions(Ctor.super)</span><br><span class="line">    <span class="keyword">const</span> cachedSuperOptions = Ctor.superOptions</span><br><span class="line">    <span class="keyword">if</span> (superOptions !== cachedSuperOptions) &#123;</span><br><span class="line">      <span class="comment">// super option changed,</span></span><br><span class="line">      <span class="comment">// need to resolve new options.</span></span><br><span class="line">      Ctor.superOptions = superOptions</span><br><span class="line">      <span class="comment">// check if there are any late-modified/attached options (#4976)</span></span><br><span class="line">      <span class="keyword">const</span> modifiedOptions = resolveModifiedOptions(Ctor)</span><br><span class="line">      <span class="comment">// update base extend options</span></span><br><span class="line">      <span class="keyword">if</span> (modifiedOptions) &#123;</span><br><span class="line">        extend(Ctor.extendOptions, modifiedOptions)</span><br><span class="line">      &#125;</span><br><span class="line">      options = Ctor.options = mergeOptions(superOptions, Ctor.extendOptions)</span><br><span class="line">      <span class="keyword">if</span> (options.name) &#123;</span><br><span class="line">        options.components[options.name] = Ctor</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">return</span> options</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">resolveModifiedOptions</span> (<span class="params">Ctor: Class&lt;Component&gt;</span>): ?<span class="title">Object</span> </span>&#123;</span><br><span class="line">  <span class="keyword">let</span> modified</span><br><span class="line">  <span class="keyword">const</span> latest = Ctor.options</span><br><span class="line">  <span class="keyword">const</span> sealed = Ctor.sealedOptions</span><br><span class="line">  <span class="keyword">for</span> (<span class="keyword">const</span> key <span class="keyword">in</span> latest) &#123;</span><br><span class="line">    <span class="keyword">if</span> (latest[key] !== sealed[key]) &#123;</span><br><span class="line">      <span class="keyword">if</span> (!modified) modified = &#123;&#125;</span><br><span class="line">      modified[key] = latest[key]</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">return</span> modified</span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>
<h2 id="stateMixin-Vue-方法"><a href="#stateMixin-Vue-方法" class="headerlink" title="stateMixin(Vue) 方法"></a>stateMixin(Vue) 方法</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">src\core\instance\state.js</span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//初始了 $set $delete #watch</span></span><br><span class="line"><span class="keyword">export</span> <span class="function"><span class="keyword">function</span> <span class="title">stateMixin</span> (<span class="params">Vue: Class&lt;Component&gt;</span>) </span>&#123;</span><br><span class="line">  <span class="comment">// flow somehow has problems with directly declared definition object</span></span><br><span class="line">  <span class="comment">// when using Object.defineProperty, so we have to procedurally build up</span></span><br><span class="line">  <span class="comment">// the object here.</span></span><br><span class="line">  <span class="keyword">const</span> dataDef = &#123;&#125;</span><br><span class="line">  dataDef.get = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123; <span class="keyword">return</span> <span class="built_in">this</span>._data &#125;</span><br><span class="line">  <span class="keyword">const</span> propsDef = &#123;&#125;</span><br><span class="line">  propsDef.get = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123; <span class="keyword">return</span> <span class="built_in">this</span>._props &#125;</span><br><span class="line">  <span class="keyword">if</span> (process.env.NODE_ENV !== <span class="string">&#x27;production&#x27;</span>) &#123;</span><br><span class="line">    dataDef.set = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">      warn(</span><br><span class="line">        <span class="string">&#x27;Avoid replacing instance root $data. &#x27;</span> +</span><br><span class="line">        <span class="string">&#x27;Use nested data properties instead.&#x27;</span>,</span><br><span class="line">        <span class="built_in">this</span></span><br><span class="line">      )</span><br><span class="line">    &#125;</span><br><span class="line">    propsDef.set = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">      warn(<span class="string">`$props is readonly.`</span>, <span class="built_in">this</span>)</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="built_in">Object</span>.defineProperty(Vue.prototype, <span class="string">&#x27;$data&#x27;</span>, dataDef)</span><br><span class="line">  <span class="built_in">Object</span>.defineProperty(Vue.prototype, <span class="string">&#x27;$props&#x27;</span>, propsDef)</span><br><span class="line"></span><br><span class="line">  Vue.prototype.$set = set</span><br><span class="line">  Vue.prototype.$delete = del</span><br><span class="line"></span><br><span class="line">  Vue.prototype.$watch = <span class="function"><span class="keyword">function</span> (<span class="params"></span></span></span><br><span class="line"><span class="function"><span class="params">    expOrFn: string | <span class="built_in">Function</span>,</span></span></span><br><span class="line"><span class="function"><span class="params">    cb: any,</span></span></span><br><span class="line"><span class="function"><span class="params">    options?: <span class="built_in">Object</span></span></span></span><br><span class="line"><span class="function"><span class="params">  </span>): <span class="title">Function</span> </span>&#123;</span><br><span class="line">    <span class="keyword">const</span> vm: Component = <span class="built_in">this</span></span><br><span class="line">    <span class="keyword">if</span> (isPlainObject(cb)) &#123;</span><br><span class="line">      <span class="keyword">return</span> createWatcher(vm, expOrFn, cb, options)</span><br><span class="line">    &#125;</span><br><span class="line">    options = options || &#123;&#125;</span><br><span class="line">    options.user = <span class="literal">true</span></span><br><span class="line">    <span class="keyword">const</span> watcher = <span class="keyword">new</span> Watcher(vm, expOrFn, cb, options)</span><br><span class="line">    <span class="keyword">if</span> (options.immediate) &#123;</span><br><span class="line">      <span class="keyword">try</span> &#123;</span><br><span class="line">        cb.call(vm, watcher.value)</span><br><span class="line">      &#125; <span class="keyword">catch</span> (error) &#123;</span><br><span class="line">        handleError(error, vm, <span class="string">`callback for immediate watcher &quot;<span class="subst">$&#123;watcher.expression&#125;</span>&quot;`</span>)</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> <span class="function"><span class="keyword">function</span> <span class="title">unwatchFn</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">      watcher.teardown()</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h2 id="lifecycleMixin-Vue-方法"><a href="#lifecycleMixin-Vue-方法" class="headerlink" title="lifecycleMixin(Vue) 方法"></a>lifecycleMixin(Vue) 方法</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br><span class="line">155</span><br><span class="line">156</span><br><span class="line">157</span><br><span class="line">158</span><br><span class="line">159</span><br><span class="line">160</span><br><span class="line">161</span><br><span class="line">162</span><br><span class="line">163</span><br><span class="line">164</span><br><span class="line">165</span><br><span class="line">166</span><br><span class="line">167</span><br><span class="line">168</span><br><span class="line">169</span><br><span class="line">170</span><br><span class="line">171</span><br><span class="line">172</span><br><span class="line">173</span><br><span class="line">174</span><br><span class="line">175</span><br><span class="line">176</span><br><span class="line">177</span><br><span class="line">178</span><br><span class="line">179</span><br><span class="line">180</span><br><span class="line">181</span><br><span class="line">182</span><br><span class="line">183</span><br><span class="line">184</span><br><span class="line">185</span><br><span class="line">186</span><br><span class="line">187</span><br><span class="line">188</span><br><span class="line">189</span><br><span class="line">190</span><br><span class="line">191</span><br><span class="line">192</span><br><span class="line">193</span><br><span class="line">194</span><br><span class="line">195</span><br><span class="line">196</span><br><span class="line">197</span><br><span class="line">198</span><br><span class="line">199</span><br><span class="line">200</span><br><span class="line">201</span><br><span class="line">202</span><br><span class="line">203</span><br><span class="line">204</span><br><span class="line">205</span><br><span class="line">206</span><br><span class="line">207</span><br><span class="line">208</span><br><span class="line">209</span><br><span class="line">210</span><br><span class="line">211</span><br><span class="line">212</span><br><span class="line">213</span><br><span class="line">214</span><br><span class="line">215</span><br><span class="line">216</span><br><span class="line">217</span><br><span class="line">218</span><br><span class="line">219</span><br><span class="line">220</span><br><span class="line">221</span><br><span class="line">222</span><br><span class="line">223</span><br><span class="line">224</span><br><span class="line">225</span><br><span class="line">226</span><br><span class="line">227</span><br><span class="line">228</span><br><span class="line">229</span><br><span class="line">230</span><br><span class="line">231</span><br><span class="line">232</span><br><span class="line">233</span><br><span class="line">234</span><br><span class="line">235</span><br><span class="line">236</span><br><span class="line">237</span><br><span class="line">238</span><br><span class="line">239</span><br><span class="line">240</span><br><span class="line">241</span><br><span class="line">242</span><br><span class="line">243</span><br><span class="line">244</span><br><span class="line">245</span><br><span class="line">246</span><br><span class="line">247</span><br><span class="line">248</span><br><span class="line">249</span><br><span class="line">250</span><br><span class="line">251</span><br><span class="line">252</span><br><span class="line">253</span><br><span class="line">254</span><br><span class="line">255</span><br><span class="line">256</span><br><span class="line">257</span><br><span class="line">258</span><br><span class="line">259</span><br><span class="line">260</span><br><span class="line">261</span><br><span class="line">262</span><br><span class="line">263</span><br><span class="line">264</span><br><span class="line">265</span><br><span class="line">266</span><br><span class="line">267</span><br><span class="line">268</span><br><span class="line">269</span><br><span class="line">270</span><br><span class="line">271</span><br><span class="line">272</span><br><span class="line">273</span><br><span class="line">274</span><br><span class="line">275</span><br><span class="line">276</span><br><span class="line">277</span><br><span class="line">278</span><br><span class="line">279</span><br><span class="line">280</span><br><span class="line">281</span><br><span class="line">282</span><br><span class="line">283</span><br><span class="line">284</span><br><span class="line">285</span><br><span class="line">286</span><br><span class="line">287</span><br><span class="line">288</span><br><span class="line">289</span><br><span class="line">290</span><br><span class="line">291</span><br><span class="line">292</span><br><span class="line">293</span><br><span class="line">294</span><br><span class="line">295</span><br><span class="line">296</span><br><span class="line">297</span><br><span class="line">298</span><br><span class="line">299</span><br><span class="line">300</span><br><span class="line">301</span><br><span class="line">302</span><br><span class="line">303</span><br><span class="line">304</span><br><span class="line">305</span><br><span class="line">306</span><br><span class="line">307</span><br><span class="line">308</span><br><span class="line">309</span><br><span class="line">310</span><br><span class="line">311</span><br><span class="line">312</span><br><span class="line">313</span><br><span class="line">314</span><br><span class="line">315</span><br><span class="line">316</span><br><span class="line">317</span><br><span class="line">318</span><br><span class="line">319</span><br><span class="line">320</span><br><span class="line">321</span><br><span class="line">322</span><br><span class="line">323</span><br><span class="line">324</span><br><span class="line">325</span><br><span class="line">326</span><br><span class="line">327</span><br><span class="line">328</span><br><span class="line">329</span><br><span class="line">330</span><br><span class="line">331</span><br><span class="line">332</span><br><span class="line">333</span><br><span class="line">334</span><br><span class="line">335</span><br><span class="line">336</span><br><span class="line">337</span><br><span class="line">338</span><br><span class="line">339</span><br><span class="line">340</span><br><span class="line">341</span><br><span class="line">342</span><br><span class="line">343</span><br><span class="line">344</span><br><span class="line">345</span><br><span class="line">346</span><br><span class="line">347</span><br><span class="line">348</span><br><span class="line">349</span><br><span class="line">350</span><br><span class="line">351</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//这里 把_update $forceUpdate $destroy 都挂在到了 Vue的原型上 然后视图更新 强制更新 销毁的时候 会把父子关系解绑 进行销毁</span></span><br><span class="line"> </span><br><span class="line"><span class="keyword">import</span> config <span class="keyword">from</span> <span class="string">&#x27;../config&#x27;</span></span><br><span class="line"><span class="keyword">import</span> Watcher <span class="keyword">from</span> <span class="string">&#x27;../observer/watcher&#x27;</span></span><br><span class="line"><span class="keyword">import</span> &#123; mark, measure &#125; <span class="keyword">from</span> <span class="string">&#x27;../util/perf&#x27;</span></span><br><span class="line"><span class="keyword">import</span> &#123; createEmptyVNode &#125; <span class="keyword">from</span> <span class="string">&#x27;../vdom/vnode&#x27;</span></span><br><span class="line"><span class="keyword">import</span> &#123; updateComponentListeners &#125; <span class="keyword">from</span> <span class="string">&#x27;./events&#x27;</span></span><br><span class="line"><span class="keyword">import</span> &#123; resolveSlots &#125; <span class="keyword">from</span> <span class="string">&#x27;./render-helpers/resolve-slots&#x27;</span></span><br><span class="line"><span class="keyword">import</span> &#123; toggleObserving &#125; <span class="keyword">from</span> <span class="string">&#x27;../observer/index&#x27;</span></span><br><span class="line"><span class="keyword">import</span> &#123; pushTarget, popTarget &#125; <span class="keyword">from</span> <span class="string">&#x27;../observer/dep&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">import</span> &#123;</span><br><span class="line">  warn,</span><br><span class="line">  noop,</span><br><span class="line">  remove,</span><br><span class="line">  emptyObject,</span><br><span class="line">  validateProp,</span><br><span class="line">  invokeWithErrorHandling</span><br><span class="line">&#125; <span class="keyword">from</span> <span class="string">&#x27;../util/index&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">let</span> activeInstance: any = <span class="literal">null</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">let</span> isUpdatingChildComponent: boolean = <span class="literal">false</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="function"><span class="keyword">function</span> <span class="title">setActiveInstance</span>(<span class="params">vm: Component</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">const</span> prevActiveInstance = activeInstance</span><br><span class="line">  activeInstance = vm</span><br><span class="line">  <span class="keyword">return</span> <span class="function">() =&gt;</span> &#123;</span><br><span class="line">    activeInstance = prevActiveInstance</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="function"><span class="keyword">function</span> <span class="title">initLifecycle</span> (<span class="params">vm: Component</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">const</span> options = vm.$options</span><br><span class="line"></span><br><span class="line">  <span class="comment">// locate first non-abstract parent</span></span><br><span class="line">  <span class="keyword">let</span> parent = options.parent</span><br><span class="line">  <span class="keyword">if</span> (parent &amp;&amp; !options.abstract) &#123;</span><br><span class="line">    <span class="keyword">while</span> (parent.$options.abstract &amp;&amp; parent.$parent) &#123;</span><br><span class="line">      parent = parent.$parent</span><br><span class="line">    &#125;</span><br><span class="line">    parent.$children.push(vm)</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  vm.$parent = parent</span><br><span class="line">  vm.$root = parent ? parent.$root : vm</span><br><span class="line"></span><br><span class="line">  vm.$children = []</span><br><span class="line">  vm.$refs = &#123;&#125;</span><br><span class="line"></span><br><span class="line">  vm._watcher = <span class="literal">null</span></span><br><span class="line">  vm._inactive = <span class="literal">null</span></span><br><span class="line">  vm._directInactive = <span class="literal">false</span></span><br><span class="line">  vm._isMounted = <span class="literal">false</span></span><br><span class="line">  vm._isDestroyed = <span class="literal">false</span></span><br><span class="line">  vm._isBeingDestroyed = <span class="literal">false</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="function"><span class="keyword">function</span> <span class="title">lifecycleMixin</span> (<span class="params">Vue: Class&lt;Component&gt;</span>) </span>&#123;</span><br><span class="line">  Vue.prototype._update = <span class="function"><span class="keyword">function</span> (<span class="params">vnode: VNode, hydrating?: boolean</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">const</span> vm: Component = <span class="built_in">this</span></span><br><span class="line">    <span class="keyword">const</span> prevEl = vm.$el</span><br><span class="line">    <span class="keyword">const</span> prevVnode = vm._vnode</span><br><span class="line">    <span class="keyword">const</span> restoreActiveInstance = setActiveInstance(vm)</span><br><span class="line">    vm._vnode = vnode</span><br><span class="line">    <span class="comment">// Vue.prototype.__patch__ is injected in entry points</span></span><br><span class="line">    <span class="comment">// based on the rendering backend used.</span></span><br><span class="line">    <span class="keyword">if</span> (!prevVnode) &#123;</span><br><span class="line">      <span class="comment">// initial render</span></span><br><span class="line">      vm.$el = vm.__patch__(vm.$el, vnode, hydrating, <span class="literal">false</span> <span class="comment">/* removeOnly */</span>)</span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">      <span class="comment">// updates</span></span><br><span class="line">      vm.$el = vm.__patch__(prevVnode, vnode)</span><br><span class="line">    &#125;</span><br><span class="line">    restoreActiveInstance()</span><br><span class="line">    <span class="comment">// update __vue__ reference</span></span><br><span class="line">    <span class="keyword">if</span> (prevEl) &#123;</span><br><span class="line">      prevEl.__vue__ = <span class="literal">null</span></span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">if</span> (vm.$el) &#123;</span><br><span class="line">      vm.$el.__vue__ = vm</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="comment">// if parent is an HOC, update its $el as well</span></span><br><span class="line">    <span class="keyword">if</span> (vm.$vnode &amp;&amp; vm.$parent &amp;&amp; vm.$vnode === vm.$parent._vnode) &#123;</span><br><span class="line">      vm.$parent.$el = vm.$el</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="comment">// updated hook is called by the scheduler to ensure that children are</span></span><br><span class="line">    <span class="comment">// updated in a parent&#x27;s updated hook.</span></span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  Vue.prototype.$forceUpdate = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">const</span> vm: Component = <span class="built_in">this</span></span><br><span class="line">    <span class="keyword">if</span> (vm._watcher) &#123;</span><br><span class="line">      vm._watcher.update()</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  Vue.prototype.$destroy = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">const</span> vm: Component = <span class="built_in">this</span></span><br><span class="line">    <span class="keyword">if</span> (vm._isBeingDestroyed) &#123;</span><br><span class="line">      <span class="keyword">return</span></span><br><span class="line">    &#125;</span><br><span class="line">    callHook(vm, <span class="string">&#x27;beforeDestroy&#x27;</span>)</span><br><span class="line">    vm._isBeingDestroyed = <span class="literal">true</span></span><br><span class="line">    <span class="comment">// remove self from parent</span></span><br><span class="line">    <span class="keyword">const</span> parent = vm.$parent</span><br><span class="line">    <span class="keyword">if</span> (parent &amp;&amp; !parent._isBeingDestroyed &amp;&amp; !vm.$options.abstract) &#123;</span><br><span class="line">      remove(parent.$children, vm)</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="comment">// teardown watchers</span></span><br><span class="line">    <span class="keyword">if</span> (vm._watcher) &#123;</span><br><span class="line">      vm._watcher.teardown()</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">let</span> i = vm._watchers.length</span><br><span class="line">    <span class="keyword">while</span> (i--) &#123;</span><br><span class="line">      vm._watchers[i].teardown()</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="comment">// remove reference from data ob</span></span><br><span class="line">    <span class="comment">// frozen object may not have observer.</span></span><br><span class="line">    <span class="keyword">if</span> (vm._data.__ob__) &#123;</span><br><span class="line">      vm._data.__ob__.vmCount--</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="comment">// call the last hook...</span></span><br><span class="line">    vm._isDestroyed = <span class="literal">true</span></span><br><span class="line">    <span class="comment">// invoke destroy hooks on current rendered tree</span></span><br><span class="line">    vm.__patch__(vm._vnode, <span class="literal">null</span>)</span><br><span class="line">    <span class="comment">// fire destroyed hook</span></span><br><span class="line">    callHook(vm, <span class="string">&#x27;destroyed&#x27;</span>)</span><br><span class="line">    <span class="comment">// turn off all instance listeners.</span></span><br><span class="line">    vm.$off()</span><br><span class="line">    <span class="comment">// remove __vue__ reference</span></span><br><span class="line">    <span class="keyword">if</span> (vm.$el) &#123;</span><br><span class="line">      vm.$el.__vue__ = <span class="literal">null</span></span><br><span class="line">    &#125;</span><br><span class="line">    <span class="comment">// release circular reference (#6759)</span></span><br><span class="line">    <span class="keyword">if</span> (vm.$vnode) &#123;</span><br><span class="line">      vm.$vnode.parent = <span class="literal">null</span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="function"><span class="keyword">function</span> <span class="title">mountComponent</span> (<span class="params"></span></span></span><br><span class="line"><span class="function"><span class="params">  vm: Component,</span></span></span><br><span class="line"><span class="function"><span class="params">  el: ?Element,</span></span></span><br><span class="line"><span class="function"><span class="params">  hydrating?: boolean</span></span></span><br><span class="line"><span class="function"><span class="params"></span>): <span class="title">Component</span> </span>&#123;</span><br><span class="line">  vm.$el = el</span><br><span class="line">  <span class="keyword">if</span> (!vm.$options.render) &#123;</span><br><span class="line">    vm.$options.render = createEmptyVNode</span><br><span class="line">    <span class="keyword">if</span> (process.env.NODE_ENV !== <span class="string">&#x27;production&#x27;</span>) &#123;</span><br><span class="line">      <span class="comment">/* istanbul ignore if */</span></span><br><span class="line">      <span class="keyword">if</span> ((vm.$options.template &amp;&amp; vm.$options.template.charAt(<span class="number">0</span>) !== <span class="string">&#x27;#&#x27;</span>) ||</span><br><span class="line">        vm.$options.el || el) &#123;</span><br><span class="line">        warn(</span><br><span class="line">          <span class="string">&#x27;You are using the runtime-only build of Vue where the template &#x27;</span> +</span><br><span class="line">          <span class="string">&#x27;compiler is not available. Either pre-compile the templates into &#x27;</span> +</span><br><span class="line">          <span class="string">&#x27;render functions, or use the compiler-included build.&#x27;</span>,</span><br><span class="line">          vm</span><br><span class="line">        )</span><br><span class="line">      &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">        warn(</span><br><span class="line">          <span class="string">&#x27;Failed to mount component: template or render function not defined.&#x27;</span>,</span><br><span class="line">          vm</span><br><span class="line">        )</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">  callHook(vm, <span class="string">&#x27;beforeMount&#x27;</span>)</span><br><span class="line"></span><br><span class="line">  <span class="keyword">let</span> updateComponent</span><br><span class="line">  <span class="comment">/* istanbul ignore if */</span></span><br><span class="line">  <span class="keyword">if</span> (process.env.NODE_ENV !== <span class="string">&#x27;production&#x27;</span> &amp;&amp; config.performance &amp;&amp; mark) &#123;</span><br><span class="line">    updateComponent = <span class="function">() =&gt;</span> &#123;</span><br><span class="line">      <span class="keyword">const</span> name = vm._name</span><br><span class="line">      <span class="keyword">const</span> id = vm._uid</span><br><span class="line">      <span class="keyword">const</span> startTag = <span class="string">`vue-perf-start:<span class="subst">$&#123;id&#125;</span>`</span></span><br><span class="line">      <span class="keyword">const</span> endTag = <span class="string">`vue-perf-end:<span class="subst">$&#123;id&#125;</span>`</span></span><br><span class="line"></span><br><span class="line">      mark(startTag)</span><br><span class="line">      <span class="keyword">const</span> vnode = vm._render()</span><br><span class="line">      mark(endTag)</span><br><span class="line">      measure(<span class="string">`vue <span class="subst">$&#123;name&#125;</span> render`</span>, startTag, endTag)</span><br><span class="line"></span><br><span class="line">      mark(startTag)</span><br><span class="line">      vm._update(vnode, hydrating)</span><br><span class="line">      mark(endTag)</span><br><span class="line">      measure(<span class="string">`vue <span class="subst">$&#123;name&#125;</span> patch`</span>, startTag, endTag)</span><br><span class="line">    &#125;</span><br><span class="line">  &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">    updateComponent = <span class="function">() =&gt;</span> &#123;</span><br><span class="line">      vm._update(vm._render(), hydrating)</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="comment">// we set this to vm._watcher inside the watcher&#x27;s constructor</span></span><br><span class="line">  <span class="comment">// since the watcher&#x27;s initial patch may call $forceUpdate (e.g. inside child</span></span><br><span class="line">  <span class="comment">// component&#x27;s mounted hook), which relies on vm._watcher being already defined</span></span><br><span class="line">  <span class="keyword">new</span> Watcher(vm, updateComponent, noop, &#123;</span><br><span class="line">    before () &#123;</span><br><span class="line">      <span class="keyword">if</span> (vm._isMounted &amp;&amp; !vm._isDestroyed) &#123;</span><br><span class="line">        callHook(vm, <span class="string">&#x27;beforeUpdate&#x27;</span>)</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;, <span class="literal">true</span> <span class="comment">/* isRenderWatcher */</span>)</span><br><span class="line">  hydrating = <span class="literal">false</span></span><br><span class="line"></span><br><span class="line">  <span class="comment">// manually mounted instance, call mounted on self</span></span><br><span class="line">  <span class="comment">// mounted is called for render-created child components in its inserted hook</span></span><br><span class="line">  <span class="keyword">if</span> (vm.$vnode == <span class="literal">null</span>) &#123;</span><br><span class="line">    vm._isMounted = <span class="literal">true</span></span><br><span class="line">    callHook(vm, <span class="string">&#x27;mounted&#x27;</span>)</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">return</span> vm</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="function"><span class="keyword">function</span> <span class="title">updateChildComponent</span> (<span class="params"></span></span></span><br><span class="line"><span class="function"><span class="params">  vm: Component,</span></span></span><br><span class="line"><span class="function"><span class="params">  propsData: ?<span class="built_in">Object</span>,</span></span></span><br><span class="line"><span class="function"><span class="params">  listeners: ?<span class="built_in">Object</span>,</span></span></span><br><span class="line"><span class="function"><span class="params">  parentVnode: MountedComponentVNode,</span></span></span><br><span class="line"><span class="function"><span class="params">  renderChildren: ?<span class="built_in">Array</span>&lt;VNode&gt;</span></span></span><br><span class="line"><span class="function"><span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">if</span> (process.env.NODE_ENV !== <span class="string">&#x27;production&#x27;</span>) &#123;</span><br><span class="line">    isUpdatingChildComponent = <span class="literal">true</span></span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="comment">// determine whether component has slot children</span></span><br><span class="line">  <span class="comment">// we need to do this before overwriting $options._renderChildren.</span></span><br><span class="line"></span><br><span class="line">  <span class="comment">// check if there are dynamic scopedSlots (hand-written or compiled but with</span></span><br><span class="line">  <span class="comment">// dynamic slot names). Static scoped slots compiled from template has the</span></span><br><span class="line">  <span class="comment">// &quot;$stable&quot; marker.</span></span><br><span class="line">  <span class="keyword">const</span> newScopedSlots = parentVnode.data.scopedSlots</span><br><span class="line">  <span class="keyword">const</span> oldScopedSlots = vm.$scopedSlots</span><br><span class="line">  <span class="keyword">const</span> hasDynamicScopedSlot = !!(</span><br><span class="line">    (newScopedSlots &amp;&amp; !newScopedSlots.$stable) ||</span><br><span class="line">    (oldScopedSlots !== emptyObject &amp;&amp; !oldScopedSlots.$stable) ||</span><br><span class="line">    (newScopedSlots &amp;&amp; vm.$scopedSlots.$key !== newScopedSlots.$key)</span><br><span class="line">  )</span><br><span class="line"></span><br><span class="line">  <span class="comment">// Any static slot children from the parent may have changed during parent&#x27;s</span></span><br><span class="line">  <span class="comment">// update. Dynamic scoped slots may also have changed. In such cases, a forced</span></span><br><span class="line">  <span class="comment">// update is necessary to ensure correctness.</span></span><br><span class="line">  <span class="keyword">const</span> needsForceUpdate = !!(</span><br><span class="line">    renderChildren ||               <span class="comment">// has new static slots</span></span><br><span class="line">    vm.$options._renderChildren ||  <span class="comment">// has old static slots</span></span><br><span class="line">    hasDynamicScopedSlot</span><br><span class="line">  )</span><br><span class="line"></span><br><span class="line">  vm.$options._parentVnode = parentVnode</span><br><span class="line">  vm.$vnode = parentVnode <span class="comment">// update vm&#x27;s placeholder node without re-render</span></span><br><span class="line"></span><br><span class="line">  <span class="keyword">if</span> (vm._vnode) &#123; <span class="comment">// update child tree&#x27;s parent</span></span><br><span class="line">    vm._vnode.parent = parentVnode</span><br><span class="line">  &#125;</span><br><span class="line">  vm.$options._renderChildren = renderChildren</span><br><span class="line"></span><br><span class="line">  <span class="comment">// update $attrs and $listeners hash</span></span><br><span class="line">  <span class="comment">// these are also reactive so they may trigger child update if the child</span></span><br><span class="line">  <span class="comment">// used them during render</span></span><br><span class="line">  vm.$attrs = parentVnode.data.attrs || emptyObject</span><br><span class="line">  vm.$listeners = listeners || emptyObject</span><br><span class="line"></span><br><span class="line">  <span class="comment">// update props</span></span><br><span class="line">  <span class="keyword">if</span> (propsData &amp;&amp; vm.$options.props) &#123;</span><br><span class="line">    toggleObserving(<span class="literal">false</span>)</span><br><span class="line">    <span class="keyword">const</span> props = vm._props</span><br><span class="line">    <span class="keyword">const</span> propKeys = vm.$options._propKeys || []</span><br><span class="line">    <span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">0</span>; i &lt; propKeys.length; i++) &#123;</span><br><span class="line">      <span class="keyword">const</span> key = propKeys[i]</span><br><span class="line">      <span class="keyword">const</span> propOptions: any = vm.$options.props <span class="comment">// wtf flow?</span></span><br><span class="line">      props[key] = validateProp(key, propOptions, propsData, vm)</span><br><span class="line">    &#125;</span><br><span class="line">    toggleObserving(<span class="literal">true</span>)</span><br><span class="line">    <span class="comment">// keep a copy of raw propsData</span></span><br><span class="line">    vm.$options.propsData = propsData</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="comment">// update listeners</span></span><br><span class="line">  listeners = listeners || emptyObject</span><br><span class="line">  <span class="keyword">const</span> oldListeners = vm.$options._parentListeners</span><br><span class="line">  vm.$options._parentListeners = listeners</span><br><span class="line">  updateComponentListeners(vm, listeners, oldListeners)</span><br><span class="line"></span><br><span class="line">  <span class="comment">// resolve slots + force update if has children</span></span><br><span class="line">  <span class="keyword">if</span> (needsForceUpdate) &#123;</span><br><span class="line">    vm.$slots = resolveSlots(renderChildren, parentVnode.context)</span><br><span class="line">    vm.$forceUpdate()</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="keyword">if</span> (process.env.NODE_ENV !== <span class="string">&#x27;production&#x27;</span>) &#123;</span><br><span class="line">    isUpdatingChildComponent = <span class="literal">false</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">isInInactiveTree</span> (<span class="params">vm</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">while</span> (vm &amp;&amp; (vm = vm.$parent)) &#123;</span><br><span class="line">    <span class="keyword">if</span> (vm._inactive) <span class="keyword">return</span> <span class="literal">true</span></span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">return</span> <span class="literal">false</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="function"><span class="keyword">function</span> <span class="title">activateChildComponent</span> (<span class="params">vm: Component, direct?: boolean</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">if</span> (direct) &#123;</span><br><span class="line">    vm._directInactive = <span class="literal">false</span></span><br><span class="line">    <span class="keyword">if</span> (isInInactiveTree(vm)) &#123;</span><br><span class="line">      <span class="keyword">return</span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125; <span class="keyword">else</span> <span class="keyword">if</span> (vm._directInactive) &#123;</span><br><span class="line">    <span class="keyword">return</span></span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">if</span> (vm._inactive || vm._inactive === <span class="literal">null</span>) &#123;</span><br><span class="line">    vm._inactive = <span class="literal">false</span></span><br><span class="line">    <span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">0</span>; i &lt; vm.$children.length; i++) &#123;</span><br><span class="line">      activateChildComponent(vm.$children[i])</span><br><span class="line">    &#125;</span><br><span class="line">    callHook(vm, <span class="string">&#x27;activated&#x27;</span>)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="function"><span class="keyword">function</span> <span class="title">deactivateChildComponent</span> (<span class="params">vm: Component, direct?: boolean</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">if</span> (direct) &#123;</span><br><span class="line">    vm._directInactive = <span class="literal">true</span></span><br><span class="line">    <span class="keyword">if</span> (isInInactiveTree(vm)) &#123;</span><br><span class="line">      <span class="keyword">return</span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">if</span> (!vm._inactive) &#123;</span><br><span class="line">    vm._inactive = <span class="literal">true</span></span><br><span class="line">    <span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">0</span>; i &lt; vm.$children.length; i++) &#123;</span><br><span class="line">      deactivateChildComponent(vm.$children[i])</span><br><span class="line">    &#125;</span><br><span class="line">    callHook(vm, <span class="string">&#x27;deactivated&#x27;</span>)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="function"><span class="keyword">function</span> <span class="title">callHook</span> (<span class="params">vm: Component, hook: string</span>) </span>&#123;</span><br><span class="line">  <span class="comment">// #7573 disable dep collection when invoking lifecycle hooks</span></span><br><span class="line">  pushTarget()</span><br><span class="line">  <span class="keyword">const</span> handlers = vm.$options[hook]</span><br><span class="line">  <span class="keyword">const</span> info = <span class="string">`<span class="subst">$&#123;hook&#125;</span> hook`</span></span><br><span class="line">  <span class="keyword">if</span> (handlers) &#123;</span><br><span class="line">    <span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">0</span>, j = handlers.length; i &lt; j; i++) &#123;</span><br><span class="line">      invokeWithErrorHandling(handlers[i], vm, <span class="literal">null</span>, vm, info)</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">if</span> (vm._hasHookEvent) &#123;</span><br><span class="line">    vm.$emit(<span class="string">&#x27;hook:&#x27;</span> + hook)</span><br><span class="line">  &#125;</span><br><span class="line">  popTarget()</span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>
<h2 id="renderMixin-Vue-方法"><a href="#renderMixin-Vue-方法" class="headerlink" title="renderMixin(Vue)  方法"></a>renderMixin(Vue)  方法</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1.</span>实现render方法 调取render.call(代理,第二个参数是H)</span><br><span class="line"><span class="comment">/* @flow */</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">import</span> &#123;</span><br><span class="line">  warn,</span><br><span class="line">  nextTick,</span><br><span class="line">  emptyObject,</span><br><span class="line">  handleError,</span><br><span class="line">  defineReactive</span><br><span class="line">&#125; <span class="keyword">from</span> <span class="string">&#x27;../util/index&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">import</span> &#123; createElement &#125; <span class="keyword">from</span> <span class="string">&#x27;../vdom/create-element&#x27;</span></span><br><span class="line"><span class="keyword">import</span> &#123; installRenderHelpers &#125; <span class="keyword">from</span> <span class="string">&#x27;./render-helpers/index&#x27;</span></span><br><span class="line"><span class="keyword">import</span> &#123; resolveSlots &#125; <span class="keyword">from</span> <span class="string">&#x27;./render-helpers/resolve-slots&#x27;</span></span><br><span class="line"><span class="keyword">import</span> &#123; normalizeScopedSlots &#125; <span class="keyword">from</span> <span class="string">&#x27;../vdom/helpers/normalize-scoped-slots&#x27;</span></span><br><span class="line"><span class="keyword">import</span> VNode, &#123; createEmptyVNode &#125; <span class="keyword">from</span> <span class="string">&#x27;../vdom/vnode&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">import</span> &#123; isUpdatingChildComponent &#125; <span class="keyword">from</span> <span class="string">&#x27;./lifecycle&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="function"><span class="keyword">function</span> <span class="title">initRender</span> (<span class="params">vm: Component</span>) </span>&#123;</span><br><span class="line">  vm._vnode = <span class="literal">null</span> <span class="comment">// the root of the child tree</span></span><br><span class="line">  vm._staticTrees = <span class="literal">null</span> <span class="comment">// v-once cached trees</span></span><br><span class="line">  <span class="keyword">const</span> options = vm.$options</span><br><span class="line">  <span class="keyword">const</span> parentVnode = vm.$vnode = options._parentVnode <span class="comment">// the placeholder node in parent tree</span></span><br><span class="line">  <span class="keyword">const</span> renderContext = parentVnode &amp;&amp; parentVnode.context</span><br><span class="line">  vm.$slots = resolveSlots(options._renderChildren, renderContext)</span><br><span class="line">  vm.$scopedSlots = emptyObject</span><br><span class="line"></span><br><span class="line">  vm._c = <span class="function">(<span class="params">a, b, c, d</span>) =&gt;</span> createElement(vm, a, b, c, d, <span class="literal">false</span>)</span><br><span class="line"></span><br><span class="line">  vm.$createElement = <span class="function">(<span class="params">a, b, c, d</span>) =&gt;</span> createElement(vm, a, b, c, d, <span class="literal">true</span>)</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">  <span class="keyword">const</span> parentData = parentVnode &amp;&amp; parentVnode.data</span><br><span class="line"></span><br><span class="line">  <span class="comment">/* istanbul ignore else */</span></span><br><span class="line">  <span class="keyword">if</span> (process.env.NODE_ENV !== <span class="string">&#x27;production&#x27;</span>) &#123;</span><br><span class="line">    defineReactive(vm, <span class="string">&#x27;$attrs&#x27;</span>, parentData &amp;&amp; parentData.attrs || emptyObject, <span class="function">() =&gt;</span> &#123;</span><br><span class="line">      !isUpdatingChildComponent &amp;&amp; warn(<span class="string">`$attrs is readonly.`</span>, vm)</span><br><span class="line">    &#125;, <span class="literal">true</span>)</span><br><span class="line">    defineReactive(vm, <span class="string">&#x27;$listeners&#x27;</span>, options._parentListeners || emptyObject, <span class="function">() =&gt;</span> &#123;</span><br><span class="line">      !isUpdatingChildComponent &amp;&amp; warn(<span class="string">`$listeners is readonly.`</span>, vm)</span><br><span class="line">    &#125;, <span class="literal">true</span>)</span><br><span class="line">  &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">    defineReactive(vm, <span class="string">&#x27;$attrs&#x27;</span>, parentData &amp;&amp; parentData.attrs || emptyObject, <span class="literal">null</span>, <span class="literal">true</span>)</span><br><span class="line">    defineReactive(vm, <span class="string">&#x27;$listeners&#x27;</span>, options._parentListeners || emptyObject, <span class="literal">null</span>, <span class="literal">true</span>)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">let</span> currentRenderingInstance: Component | <span class="literal">null</span> = <span class="literal">null</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// for testing only</span></span><br><span class="line"><span class="keyword">export</span> <span class="function"><span class="keyword">function</span> <span class="title">setCurrentRenderingInstance</span> (<span class="params">vm: Component</span>) </span>&#123;</span><br><span class="line">  currentRenderingInstance = vm</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="function"><span class="keyword">function</span> <span class="title">renderMixin</span> (<span class="params">Vue: Class&lt;Component&gt;</span>) </span>&#123;</span><br><span class="line">  <span class="comment">// install runtime convenience helpers</span></span><br><span class="line">  installRenderHelpers(Vue.prototype)</span><br><span class="line"></span><br><span class="line">  Vue.prototype.$nextTick = <span class="function"><span class="keyword">function</span> (<span class="params">fn: <span class="built_in">Function</span></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> nextTick(fn, <span class="built_in">this</span>)</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  Vue.prototype._render = <span class="function"><span class="keyword">function</span> (<span class="params"></span>): <span class="title">VNode</span> </span>&#123;</span><br><span class="line">    <span class="keyword">const</span> vm: Component = <span class="built_in">this</span></span><br><span class="line">    <span class="keyword">const</span> &#123; render, _parentVnode &#125; = vm.$options</span><br><span class="line"></span><br><span class="line">    <span class="keyword">if</span> (_parentVnode) &#123;</span><br><span class="line">      vm.$scopedSlots = normalizeScopedSlots(</span><br><span class="line">        _parentVnode.data.scopedSlots,</span><br><span class="line">        vm.$slots,</span><br><span class="line">        vm.$scopedSlots</span><br><span class="line">      )</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    vm.$vnode = _parentVnode</span><br><span class="line">    <span class="keyword">let</span> vnode</span><br><span class="line">    <span class="keyword">try</span> &#123;</span><br><span class="line">      currentRenderingInstance = vm</span><br><span class="line">      vnode = render.call(vm._renderProxy, vm.$createElement)</span><br><span class="line">    &#125; <span class="keyword">catch</span> (e) &#123;</span><br><span class="line">      handleError(e, vm, <span class="string">`render`</span>)</span><br><span class="line">      <span class="keyword">if</span> (process.env.NODE_ENV !== <span class="string">&#x27;production&#x27;</span> &amp;&amp; vm.$options.renderError) &#123;</span><br><span class="line">        <span class="keyword">try</span> &#123;</span><br><span class="line">          vnode = vm.$options.renderError.call(vm._renderProxy, vm.$createElement, e)</span><br><span class="line">        &#125; <span class="keyword">catch</span> (e) &#123;</span><br><span class="line">          handleError(e, vm, <span class="string">`renderError`</span>)</span><br><span class="line">          vnode = vm._vnode</span><br><span class="line">        &#125;</span><br><span class="line">      &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">        vnode = vm._vnode</span><br><span class="line">      &#125;</span><br><span class="line">    &#125; <span class="keyword">finally</span> &#123;</span><br><span class="line">      currentRenderingInstance = <span class="literal">null</span></span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">if</span> (<span class="built_in">Array</span>.isArray(vnode) &amp;&amp; vnode.length === <span class="number">1</span>) &#123;</span><br><span class="line">      vnode = vnode[<span class="number">0</span>]</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">if</span> (!(vnode <span class="keyword">instanceof</span> VNode)) &#123;</span><br><span class="line">      <span class="keyword">if</span> (process.env.NODE_ENV !== <span class="string">&#x27;production&#x27;</span> &amp;&amp; <span class="built_in">Array</span>.isArray(vnode)) &#123;</span><br><span class="line">        warn(</span><br><span class="line">          <span class="string">&#x27;Multiple root nodes returned from render function. Render function &#x27;</span> +</span><br><span class="line">          <span class="string">&#x27;should return a single root node.&#x27;</span>,</span><br><span class="line">          vm</span><br><span class="line">        )</span><br><span class="line">      &#125;</span><br><span class="line">      vnode = createEmptyVNode()</span><br><span class="line">    &#125;</span><br><span class="line">    vnode.parent = _parentVnode</span><br><span class="line">    <span class="keyword">return</span> vnode</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>
<h2 id="runtime-index-js-中的-mountComponent方法干了哪些事"><a href="#runtime-index-js-中的-mountComponent方法干了哪些事" class="headerlink" title="runtime\index.js 中的  mountComponent方法干了哪些事"></a>runtime\index.js 中的  mountComponent方法干了哪些事</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1.</span> runtime\index.js  <span class="keyword">import</span> &#123; mountComponent &#125; <span class="keyword">from</span> <span class="string">&#x27;core/instance/lifecycle&#x27;</span></span><br><span class="line"><span class="number">2.</span> 主要挂载了组件</span><br><span class="line"><span class="number">3.</span> 先去判断 你有没有render函数 然后去调 beforeMount 钩子函数</span><br><span class="line"><span class="number">4.</span> 组件级更新 每次数据变了 就组件更新</span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// core/instance/lifecycle</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="function"><span class="keyword">function</span> <span class="title">mountComponent</span> (<span class="params"></span></span></span><br><span class="line"><span class="function"><span class="params">  vm: Component,</span></span></span><br><span class="line"><span class="function"><span class="params">  el: ?Element,</span></span></span><br><span class="line"><span class="function"><span class="params">  hydrating?: boolean</span></span></span><br><span class="line"><span class="function"><span class="params"></span>): <span class="title">Component</span> </span>&#123;</span><br><span class="line">  vm.$el = el</span><br><span class="line">  <span class="keyword">if</span> (!vm.$options.render) &#123;</span><br><span class="line">    vm.$options.render = createEmptyVNode</span><br><span class="line">    <span class="keyword">if</span> (process.env.NODE_ENV !== <span class="string">&#x27;production&#x27;</span>) &#123;</span><br><span class="line">      <span class="comment">/* istanbul ignore if */</span></span><br><span class="line">      <span class="keyword">if</span> ((vm.$options.template &amp;&amp; vm.$options.template.charAt(<span class="number">0</span>) !== <span class="string">&#x27;#&#x27;</span>) ||</span><br><span class="line">        vm.$options.el || el) &#123;</span><br><span class="line">        warn(</span><br><span class="line">          <span class="string">&#x27;You are using the runtime-only build of Vue where the template &#x27;</span> +</span><br><span class="line">          <span class="string">&#x27;compiler is not available. Either pre-compile the templates into &#x27;</span> +</span><br><span class="line">          <span class="string">&#x27;render functions, or use the compiler-included build.&#x27;</span>,</span><br><span class="line">          vm</span><br><span class="line">        )</span><br><span class="line">      &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">        warn(</span><br><span class="line">          <span class="string">&#x27;Failed to mount component: template or render function not defined.&#x27;</span>,</span><br><span class="line">          vm</span><br><span class="line">        )</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">  callHook(vm, <span class="string">&#x27;beforeMount&#x27;</span>)</span><br><span class="line"></span><br><span class="line">  <span class="keyword">let</span> updateComponent</span><br><span class="line">  <span class="comment">/* istanbul ignore if */</span></span><br><span class="line">  <span class="keyword">if</span> (process.env.NODE_ENV !== <span class="string">&#x27;production&#x27;</span> &amp;&amp; config.performance &amp;&amp; mark) &#123;</span><br><span class="line">    updateComponent = <span class="function">() =&gt;</span> &#123;</span><br><span class="line">      <span class="keyword">const</span> name = vm._name</span><br><span class="line">      <span class="keyword">const</span> id = vm._uid</span><br><span class="line">      <span class="keyword">const</span> startTag = <span class="string">`vue-perf-start:<span class="subst">$&#123;id&#125;</span>`</span></span><br><span class="line">      <span class="keyword">const</span> endTag = <span class="string">`vue-perf-end:<span class="subst">$&#123;id&#125;</span>`</span></span><br><span class="line"></span><br><span class="line">      mark(startTag)</span><br><span class="line">      <span class="keyword">const</span> vnode = vm._render()</span><br><span class="line">      mark(endTag)</span><br><span class="line">      measure(<span class="string">`vue <span class="subst">$&#123;name&#125;</span> render`</span>, startTag, endTag)</span><br><span class="line"></span><br><span class="line">      mark(startTag)</span><br><span class="line">      vm._update(vnode, hydrating)</span><br><span class="line">      mark(endTag)</span><br><span class="line">      measure(<span class="string">`vue <span class="subst">$&#123;name&#125;</span> patch`</span>, startTag, endTag)</span><br><span class="line">    &#125;</span><br><span class="line">  &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">    <span class="comment">//render 会把渲染后的结果执行 vm._update 渲染到页面上   </span></span><br><span class="line">    updateComponent = <span class="function">() =&gt;</span> &#123;</span><br><span class="line">      vm._update(vm._render(), hydrating)</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="comment">// we set this to vm._watcher inside the watcher&#x27;s constructor</span></span><br><span class="line">  <span class="comment">// since the watcher&#x27;s initial patch may call $forceUpdate (e.g. inside child</span></span><br><span class="line">  <span class="comment">// component&#x27;s mounted hook), which relies on vm._watcher being already defined</span></span><br><span class="line">  <span class="keyword">new</span> Watcher(vm, updateComponent, noop, &#123;</span><br><span class="line">    before () &#123;</span><br><span class="line">      <span class="keyword">if</span> (vm._isMounted &amp;&amp; !vm._isDestroyed) &#123;</span><br><span class="line">        callHook(vm, <span class="string">&#x27;beforeUpdate&#x27;</span>)</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;, <span class="literal">true</span> <span class="comment">/* isRenderWatcher */</span>)</span><br><span class="line">  hydrating = <span class="literal">false</span></span><br><span class="line"></span><br><span class="line">  <span class="comment">// manually mounted instance, call mounted on self</span></span><br><span class="line">  <span class="comment">// mounted is called for render-created child components in its inserted hook</span></span><br><span class="line">  <span class="keyword">if</span> (vm.$vnode == <span class="literal">null</span>) &#123;</span><br><span class="line">    vm._isMounted = <span class="literal">true</span></span><br><span class="line">    callHook(vm, <span class="string">&#x27;mounted&#x27;</span>)</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">return</span> vm</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
</article><div class="post-copyright"><div class="post-copyright__title"><span class="post-copyright-info"><h>Vue 源码解析</h></span></div><div class="post-copyright__type"><span class="post-copyright-info"><a href="http://example.com/2019/03/14/Vue%E6%BA%90%E7%A0%81/">http://example.com/2019/03/14/Vue%E6%BA%90%E7%A0%81/</a></span></div><div class="post-copyright-m"><div class="post-copyright-m-info"><div class="post-copyright-a"><h>作者</h><div class="post-copyright-cc-info"><h>北城韩雨</h></div></div><div class="post-copyright-c"><h>发布于</h><div class="post-copyright-cc-info"><h>2019-03-14</h></div></div><div class="post-copyright-u"><h>更新于</h><div class="post-copyright-cc-info"><h>2019-06-03</h></div></div><div class="post-copyright-c"><h>许可协议</h><div class="post-copyright-cc-info"><a class="icon" rel="noopener" target="_blank" title="Creative Commons" href="https://creativecommons.org/"><i class="fab fa-creative-commons"></i></a><a rel="noopener" target="_blank" title="CC BY-NC-SA 4.0" href="https://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a></div></div></div></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/Vue/">Vue</a></div><div class="post_share"></div></div><link rel="stylesheet" href="/" media="defer" onload="this.media='all'"/><div class="post-reward"><button class="tip-button reward-button"><span class="tip-button__text">打赏</span><div class="coin-wrapper"><div class="coin"><div class="coin__middle"></div><div class="coin__back"></div><div class="coin__front"></div></div></div><div class="reward-main"><ul class="reward-all"><li class="reward-item"><a href="/img/weixin.jpg" target="_blank"><img class="post-qr-code-img" src="/img/weixin.jpg" alt="微信"/></a><div class="post-qr-code-desc">微信</div></li><li class="reward-item"><a href="/img/taobao.jpg" target="_blank"><img class="post-qr-code-img" src="/img/taobao.jpg" alt="支付宝"/></a><div class="post-qr-code-desc">支付宝</div></li></ul></div></button></div><script defer="defer" src="/"></script><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/2019/03/16/%E6%89%8B%E5%86%99%E4%B8%80%E4%B8%AAlow%E7%A2%A7%E7%89%88Vue/"><img class="prev-cover" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.vjshi.com%2F2017-07-20%2F4f06f9aa2ebcea6691a78537052e8e9f%2F00001.jpg%3Fx-oss-process%3Dstyle%2Fwatermark&amp;refer=http%3A%2F%2Fpic.vjshi.com&amp;app=2002&amp;size=f9999,10000&amp;q=a80&amp;n=0&amp;g=0n&amp;fmt=jpeg?sec=1629530599&amp;t=32fb97bad7007bdc6c712ccadacd5721" onerror="onerror=null;src='/img/404.jpg'" alt="cover of previous post"><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">手写一个low碧版Vue</div></div></a></div><div class="next-post pull-right"><a href="/2019/03/12/%E5%BC%82%E6%AD%A5%E7%BB%84%E4%BB%B6%E5%92%8Cmock%E7%9A%84%E5%9F%BA%E6%9C%AC%E4%BD%BF%E7%94%A8/"><img class="next-cover" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcz-video-photo.oss-cn-beijing.aliyuncs.com%2F20191017%2F4cfc341591d242327b67e9ceb6953612_00002.jpg&amp;refer=http%3A%2F%2Fcz-video-photo.oss-cn-beijing.aliyuncs.com&amp;app=2002&amp;size=f9999,10000&amp;q=a80&amp;n=0&amp;g=0n&amp;fmt=jpeg?sec=1629530702&amp;t=80943e12d5239f63beafd6d1c540855f" onerror="onerror=null;src='/img/404.jpg'" alt="cover of next post"><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">异步组件(左树右表)和Mock的基本使用</div></div></a></div></nav><div class="relatedPosts"><div class="headline"><i class="fas fa-thumbs-up fa-fw"></i><span> 相关推荐</span></div><div class="relatedPosts-list"><div><a href="/2021/04/16/gin-vue-admin/" title="Gin-Vue-Admin"><img class="cover" src="/img/gin-vue-admin.jpg" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2021-04-16</div><div class="title">Gin-Vue-Admin</div></div></a></div><div><a href="/2021/01/08/Vue源码开发之组件的渲染10/" title="Vue源码开发-组件的渲染10"><img class="cover" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.vjshi.com%2F2018-07-17%2F3eca5394963b50e37b7be2ba320029ec%2F00003.jpg%3Fx-oss-process%3Dstyle%2Fwatermark&refer=http%3A%2F%2Fpic.vjshi.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1629530644&t=10679b5732c52e39eeb588040240a790" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2021-01-08</div><div class="title">Vue源码开发-组件的渲染10</div></div></a></div><div><a href="/2021/01/07/Vue源码开发之组件的合并策略09/" title="Vue源码开发-组件合并策略09"><img class="cover" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcz-video-photo.oss-cn-beijing.aliyuncs.com%2F20191017%2F4cfc341591d242327b67e9ceb6953612_00002.jpg&refer=http%3A%2F%2Fcz-video-photo.oss-cn-beijing.aliyuncs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1629530702&t=80943e12d5239f63beafd6d1c540855f" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2021-01-07</div><div class="title">Vue源码开发-组件合并策略09</div></div></a></div><div><a href="/2021/01/06/Vue源码开发之数组的依赖收集08/" title="Vue源码开发-数组的依赖收集08"><img class="cover" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.vjshi.com%2F2018-07-17%2F3eca5394963b50e37b7be2ba320029ec%2F00003.jpg%3Fx-oss-process%3Dstyle%2Fwatermark&refer=http%3A%2F%2Fpic.vjshi.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1629530644&t=10679b5732c52e39eeb588040240a790" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2021-01-06</div><div class="title">Vue源码开发-数组的依赖收集08</div></div></a></div><div><a href="/2021/01/06/Vue源码开发之生命周期合并07/" title="Vue源码开发-生命周期合并07"><img class="cover" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.vjshi.com%2F2018-07-17%2Faf41dabad727ba80c9ca8a2bfbd22a58%2F00004.jpg%3Fx-oss-process%3Dstyle%2Fwatermark&refer=http%3A%2F%2Fpic.vjshi.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1629530659&t=bbcfe1e86f393eecbb0722db1b92e475" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2021-01-06</div><div class="title">Vue源码开发-生命周期合并07</div></div></a></div><div><a href="/2021/01/05/Vue源码开发之批量更新06/" title="Vue源码开发-批量更新06"><img class="cover" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.vjshi.com%2F2018-07-17%2F3eca5394963b50e37b7be2ba320029ec%2F00003.jpg%3Fx-oss-process%3Dstyle%2Fwatermark&refer=http%3A%2F%2Fpic.vjshi.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1629530644&t=10679b5732c52e39eeb588040240a790" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2021-01-05</div><div class="title">Vue源码开发-批量更新06</div></div></a></div></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="is-center"><div class="avatar-img"><img src="/img/my.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">北城韩雨</div><div class="author-info__description">一个前端界的小学生</div></div><div class="card-info-data"><div class="card-info-data-item is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">65</div></a></div><div class="card-info-data-item is-center"><a href="/tags/"><div class="headline">标签</div><div class="length-num">23</div></a></div><div class="card-info-data-item is-center"><a href="/categories/"><div class="headline">分类</div><div class="length-num">21</div></a></div></div><a class="button--animated" id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/wazer1987"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="/wangzhengvslike@163.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn card-announcement-animation"></i><span>公告</span></div><div class="announcement_content"><p>感谢访问本站，如喜欢请收藏。本站主要分享前端知识，立志成为资深前端工程师，但目前是一个前端界的小学生 若喜欢可以打赏请博主喝一杯冰阔落</p> <p>另外请大家多多支持淼哥的开源项目</p> <p>https://github.com/flipped-aurora/gin-vue-admin</p> <p>🌟🌟欢迎大家start 🌟🌟</p> <p>欢迎加入博主的前端技术交流群</p> <p style="background:rgba(255,255,255,1);margin:0"> <img src="/img/code.png"></img> </p></div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#Vue%E6%BA%90%E7%A0%81%E8%A7%A3%E6%9E%90"><span class="toc-text">Vue源码解析</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#NPM%E5%8C%85%E5%8F%91%E5%B8%83%E6%B5%81%E7%A8%8B"><span class="toc-text">NPM包发布流程</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%A6%82%E4%BD%95%E5%8E%BB%E7%9C%8B%E6%BA%90%E7%A0%81"><span class="toc-text">如何去看源码</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%89%93%E5%8C%85%E7%9A%84%E4%B9%8B%E5%90%8E%E7%9A%84%E7%89%88%E6%9C%AC-%E4%B8%80%E4%B8%AA%E6%98%AFruntime-%E4%B8%80%E4%B8%AA%E6%98%AF-runtime-compiler"><span class="toc-text">打包的之后的版本 一个是runtime 一个是 runtime + compiler</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Vue%E6%BA%90%E7%A0%81-SRC%E4%B8%8B%E7%9A%84%E6%96%87%E4%BB%B6%E7%9B%AE%E5%BD%95"><span class="toc-text">Vue源码 SRC下的文件目录</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%BA%90%E7%A0%81%E7%9A%84%E5%85%A5%E5%8F%A3%E6%96%87%E4%BB%B6"><span class="toc-text">源码的入口文件</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%85%A5%E5%8F%A3%E6%96%87%E4%BB%B6-entry-runtime-with-compiler-js-%E9%83%BD%E5%B9%B2%E4%BA%86%E5%93%AA%E4%BA%9B%E4%BA%8B"><span class="toc-text">入口文件 entry-runtime-with-compiler.js 都干了哪些事</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#rentime-index%E9%83%BD%E5%B9%B2%E4%BA%86%E5%93%AA%E4%BA%9B%E4%BA%8B"><span class="toc-text">rentime&#x2F;index都干了哪些事</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#core-index-%E9%83%BD%E5%B9%B2%E4%BA%86%E5%93%AA%E4%BA%9B%E4%BA%8B"><span class="toc-text">core&#x2F;index 都干了哪些事</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#global-api-index%E9%83%BD%E5%B9%B2%E4%BA%86%E4%BB%80%E4%B9%88%E4%BA%8B"><span class="toc-text">global-api&#x2F;index都干了什么事</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#globalAPI-%E5%87%BD%E6%95%B0-%E5%88%9D%E5%A7%8B%E5%8C%96%E7%9A%84%E5%85%A8%E5%B1%80API"><span class="toc-text">globalAPI  函数 初始化的全局API</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#instance-index-%E7%9C%9F%E5%AE%9E%E7%9A%84Vue-%E9%83%BD%E5%B9%B2%E4%BA%86%E5%93%AA%E4%BA%9B%E4%BA%8B"><span class="toc-text">instance&#x2F;index 真实的Vue 都干了哪些事</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#initMixin-Vue-%E6%96%B9%E6%B3%95"><span class="toc-text">initMixin(Vue)方法</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#stateMixin-Vue-%E6%96%B9%E6%B3%95"><span class="toc-text">stateMixin(Vue) 方法</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#lifecycleMixin-Vue-%E6%96%B9%E6%B3%95"><span class="toc-text">lifecycleMixin(Vue) 方法</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#renderMixin-Vue-%E6%96%B9%E6%B3%95"><span class="toc-text">renderMixin(Vue)  方法</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#runtime-index-js-%E4%B8%AD%E7%9A%84-mountComponent%E6%96%B9%E6%B3%95%E5%B9%B2%E4%BA%86%E5%93%AA%E4%BA%9B%E4%BA%8B"><span class="toc-text">runtime\index.js 中的  mountComponent方法干了哪些事</span></a></li></ol></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/2021/04/16/gin-vue-admin/" title="Gin-Vue-Admin"><img src="/img/gin-vue-admin.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Gin-Vue-Admin"/></a><div class="content"><a class="title" href="/2021/04/16/gin-vue-admin/" title="Gin-Vue-Admin">Gin-Vue-Admin</a><time datetime="2021-04-15T16:00:00.000Z" title="发表于 2021-04-16 00:00:00">2021-04-16</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2021/01/08/Vue%E6%BA%90%E7%A0%81%E5%BC%80%E5%8F%91%E4%B9%8B%E7%BB%84%E4%BB%B6%E7%9A%84%E6%B8%B2%E6%9F%9310/" title="Vue源码开发-组件的渲染10"><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.vjshi.com%2F2018-07-17%2F3eca5394963b50e37b7be2ba320029ec%2F00003.jpg%3Fx-oss-process%3Dstyle%2Fwatermark&amp;refer=http%3A%2F%2Fpic.vjshi.com&amp;app=2002&amp;size=f9999,10000&amp;q=a80&amp;n=0&amp;g=0n&amp;fmt=jpeg?sec=1629530644&amp;t=10679b5732c52e39eeb588040240a790" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Vue源码开发-组件的渲染10"/></a><div class="content"><a class="title" href="/2021/01/08/Vue%E6%BA%90%E7%A0%81%E5%BC%80%E5%8F%91%E4%B9%8B%E7%BB%84%E4%BB%B6%E7%9A%84%E6%B8%B2%E6%9F%9310/" title="Vue源码开发-组件的渲染10">Vue源码开发-组件的渲染10</a><time datetime="2021-01-07T16:00:00.000Z" title="发表于 2021-01-08 00:00:00">2021-01-08</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2021/01/07/Vue%E6%BA%90%E7%A0%81%E5%BC%80%E5%8F%91%E4%B9%8B%E7%BB%84%E4%BB%B6%E7%9A%84%E5%90%88%E5%B9%B6%E7%AD%96%E7%95%A509/" title="Vue源码开发-组件合并策略09"><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcz-video-photo.oss-cn-beijing.aliyuncs.com%2F20191017%2F4cfc341591d242327b67e9ceb6953612_00002.jpg&amp;refer=http%3A%2F%2Fcz-video-photo.oss-cn-beijing.aliyuncs.com&amp;app=2002&amp;size=f9999,10000&amp;q=a80&amp;n=0&amp;g=0n&amp;fmt=jpeg?sec=1629530702&amp;t=80943e12d5239f63beafd6d1c540855f" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Vue源码开发-组件合并策略09"/></a><div class="content"><a class="title" href="/2021/01/07/Vue%E6%BA%90%E7%A0%81%E5%BC%80%E5%8F%91%E4%B9%8B%E7%BB%84%E4%BB%B6%E7%9A%84%E5%90%88%E5%B9%B6%E7%AD%96%E7%95%A509/" title="Vue源码开发-组件合并策略09">Vue源码开发-组件合并策略09</a><time datetime="2021-01-06T16:00:00.000Z" title="发表于 2021-01-07 00:00:00">2021-01-07</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2021/01/06/Vue%E6%BA%90%E7%A0%81%E5%BC%80%E5%8F%91%E4%B9%8B%E6%95%B0%E7%BB%84%E7%9A%84%E4%BE%9D%E8%B5%96%E6%94%B6%E9%9B%8608/" title="Vue源码开发-数组的依赖收集08"><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.vjshi.com%2F2018-07-17%2F3eca5394963b50e37b7be2ba320029ec%2F00003.jpg%3Fx-oss-process%3Dstyle%2Fwatermark&amp;refer=http%3A%2F%2Fpic.vjshi.com&amp;app=2002&amp;size=f9999,10000&amp;q=a80&amp;n=0&amp;g=0n&amp;fmt=jpeg?sec=1629530644&amp;t=10679b5732c52e39eeb588040240a790" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Vue源码开发-数组的依赖收集08"/></a><div class="content"><a class="title" href="/2021/01/06/Vue%E6%BA%90%E7%A0%81%E5%BC%80%E5%8F%91%E4%B9%8B%E6%95%B0%E7%BB%84%E7%9A%84%E4%BE%9D%E8%B5%96%E6%94%B6%E9%9B%8608/" title="Vue源码开发-数组的依赖收集08">Vue源码开发-数组的依赖收集08</a><time datetime="2021-01-05T16:00:00.000Z" title="发表于 2021-01-06 00:00:00">2021-01-06</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2021/01/06/Vue%E6%BA%90%E7%A0%81%E5%BC%80%E5%8F%91%E4%B9%8B%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E5%90%88%E5%B9%B607/" title="Vue源码开发-生命周期合并07"><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.vjshi.com%2F2018-07-17%2Faf41dabad727ba80c9ca8a2bfbd22a58%2F00004.jpg%3Fx-oss-process%3Dstyle%2Fwatermark&amp;refer=http%3A%2F%2Fpic.vjshi.com&amp;app=2002&amp;size=f9999,10000&amp;q=a80&amp;n=0&amp;g=0n&amp;fmt=jpeg?sec=1629530659&amp;t=bbcfe1e86f393eecbb0722db1b92e475" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Vue源码开发-生命周期合并07"/></a><div class="content"><a class="title" href="/2021/01/06/Vue%E6%BA%90%E7%A0%81%E5%BC%80%E5%8F%91%E4%B9%8B%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E5%90%88%E5%B9%B607/" title="Vue源码开发-生命周期合并07">Vue源码开发-生命周期合并07</a><time datetime="2021-01-05T16:00:00.000Z" title="发表于 2021-01-06 00:00:00">2021-01-06</time></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright"><span>&copy;2017 - 2021</span><svg style="width:2em; height:2em;position: relative;top: 10px;" aria-hidden="true"><use xlink:href="#icon-Butterfly"></use></svg><span>北城韩雨</span></div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div><div class="footer_custom_text"><p><a style="margin-inline:5px" target="_blank" href="https://hexo.io/"><img src="https://img.shields.io/badge/Frame-Hexo-blue?style=flat&logo=hexo" title="博客框架为Hexo"></a><a style="margin-inline:5px" target="_blank" href="https://butterfly.js.org/"><img src="https://img.shields.io/badge/Theme-Butterfly-6513df?style=flat&logo=bitdefender" title="主题采用butterfly"></a><a style="margin-inline:5px" target="_blank" href="https://www.jsdelivr.com/"><img src="https://img.shields.io/badge/CDN-jsDelivr-orange?style=flat&logo=jsDelivr" title="本站使用JsDelivr为静态资源提供CDN加速"></a></p></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i></button></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://cdn.jsdelivr.net/npm/medium-zoom/dist/medium-zoom.min.js"></script><div class="js-pjax"></div><script defer src="/live2d-widget/autoload.js"></script><script src="/js/coin.js"></script><script async src="//at.alicdn.com/t/font_2700632_3rtvhzzpl3h.js"></script><script src="/js/liuxing.js" data-pjax></script><canvas class="fireworks" mobile="false"></canvas><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/fireworks.min.js"></script><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/activate-power-mode.min.js"></script><script>POWERMODE.colorful = true;
POWERMODE.shake = true;
POWERMODE.mobile = false;
document.body.addEventListener('input', POWERMODE);
</script><script async data-pjax src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script></div><!-- hexo injector body_end start --><div class="js-pjax"><script async="async">var arr = document.getElementsByClassName('recent-post-item');
for(var i = 0;i<arr.length;i++){
    arr[i].classList.add('wow');
    arr[i].classList.add('animate__zoomIn');
    arr[i].setAttribute('data-wow-duration', '1s');
    arr[i].setAttribute('data-wow-delay', '0ms');
    arr[i].setAttribute('data-wow-offset', '100');
    arr[i].setAttribute('data-wow-iteration', '1');
  }</script><script async="async">var arr = document.getElementsByClassName('card-widget');
for(var i = 0;i<arr.length;i++){
    arr[i].classList.add('wow');
    arr[i].classList.add('animate__zoomIn');
    arr[i].setAttribute('data-wow-duration', '');
    arr[i].setAttribute('data-wow-delay', '');
    arr[i].setAttribute('data-wow-offset', '');
    arr[i].setAttribute('data-wow-iteration', '');
  }</script></div><script defer src="https://cdn.jsdelivr.net/gh/graingert/wow@1.3.0/dist/wow.min.js"></script><script defer src="https://cdn.jsdelivr.net/npm/hexo-butterfly-wowjs/lib/wow_init.min.js"></script><script async src="//at.alicdn.com/t/font_2032782_8d5kxvn09md.js"></script><!-- hexo injector body_end end --></body></html>